Level 53
All Vue components don't show up or just some?
Oct 13, 2017
4
Level 13
Works on desktop but not mobile
Hi. I've hit an issue with the Vue components not working on a mobile device.
Testing in desktop all works perfectly but as soon as I try it on a mobile device, its as if it doesn't like jQuery or Vue.
There are no errors while compiling Vue and nothing in the browser's inspector. But that's where the next issue comes of how to look for the error on a mobile device. If there was an error somewhere I'd probably be able to trace it but there's nothing. Any ideas on how to sort or where to start looking. Cheers
Level 28
What type of mobile device?
On iOS you can go to Settings > Safari > Advanced and turn on the web inspector. Then connect the device to you computer via USB and launch Safari on your computer. Be sure "Show Develop menu in menu bar" is enbaled in your advanced settings. Open the page on your iOS device, then on your computer you should see the device listed in the develop menu, which should then show any open pages.
Level 13
To resolve the issue, God bless Github. Reverted back to an earlier commit and all works fine. The only thing I can think of is I done something in the app.js/bootstrap.js, but nothing was obvious.
@ejdelmonico None of the components are showing whatsoever. Strange as jQuery works on desktop and not on mobile which has confused me a bit.
@sutherland Awesome I never knew you could do that. I've given it a shot and im getting these errors:
Refused to load data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjJweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMjIgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ1ICg0MzQ3NSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+X0Fzc2V0cy9Cb3RoL1ZvbHVtZUhpIFJUTDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmc...c4NDJlLTE2LDcuNSBDOC44ODE3ODQyZS0xNiw0Ljc3NTIzNDMgMC45MjksMi4yOTE2MTY1NCAyLjcyMiwwLjE2MDQ0NTc4NyBDMi44NzcsLTAuMDIyOTkxNTQwNiAzLjE2MSwtMC4wNTM5MDc5NDQyIDMuMzU1LDAuMDkyNDI5Njk5NSBDMy41NTEsMC4yMzc3MzY3OTYgMy41ODMsMC41MDQ2NDg0MTQgMy40MjgsMC42ODkxMTYyODkgQzEuNzYzLDIuNjY3NzY2MTIgMC45MDEsNC45Njg5NzcwOSAwLjkwMSw3LjUgQzAuOTAxLDEwLjAzMTAyMjkgMS43NjMsMTIuMzMyMjMzOSAzLjQyOCwxNC4zMTA4ODM3IFoiIGlkPSJpT1MvRnVsbHNjcmVlbi9NdXRlIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6IG5vcm1hbDsiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg== because it does not appear in the img-src directive of the Content Security Policy.
Level 28
Something must be setting a Content-Security-Policy HTTP header or your page has a tag in the head that looks something like this:
<meta http-equiv="Content-Security-Policy" content=" ... ">
This is basically a whitelist for the client to know what is safe to load and what isn't. Use the network inspector to check the headers if you can't find the meta tag. It needs to be updated to include data: for img-src.
Here's some more info: https://developers.google.com/web/fundamentals/security/csp/
Please or to participate in this conversation.