I am using an iframe on my React app. my problem is that in development and production the iframe content isn't loading on my pc or cellphone. The thing is that it does work on some other devices.
In addition to that it does work on Edge on all devices.
The webpage that should be displayed is also written in React.
I haven't found any mention on google of this problem.
What could cause such weird behavior?
Related
I have deployed my React PWA on AWS Amplify. Works perfectly on the Chrome Desktop browser on localhost as well as when deployed to AWS Amplify. Unfortunately though, on Safari Desktop as well as on Chrome and Safari on my iPhone, I always only get a blank page. Important to know: I am using basic auth.
I have looked into the Safari web developer tools on my iPhone and I can see in the console that I get a 401 error on loading manifest.json. This error does not show up on Chrome on Desktop and here the app works flawlessly as described above.
What could be the cause here?
I have already tried the following:
Playing around with all possible rewrite rules in AWS Amplify. Currently I use the rule </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> --> index.html (200)
Setting attribute homepage in my package.json either to "." or also to the base url of where my AWS amplify deployment lands
Adding the attribute crossorigin="use-credentials" to the reference of manifest.json in the index.html page (<link rel="manifest" href="%PUBLIC_URL%/manifest.json" crossorigin="use-credentials" />)
After reading all possible posts on stackoverflow and anywhere else in the web, I am stuck. Can somebody maybe give me another idea to try out?
Thanks a lot and best regards
EDIT 1: I am trying to use Bluetooth on that React app. What I now also figured out is that I also get an error message Invariant Violation: This device is not capable of using Bluetooth - could that be the reason for the white screen?
OK, for all who might stumble above the same issue in the future - the problem was the Bluetooth connection I was trying to build up. I had not paid enough attention to the console warning Invariant Violation: This device is not capable of using Bluetooth cause I had thought this could not cause the problem. But it did. After removing the Bluetooth capability, the app renders as expected on all browsers no matter if Desktop or mobile device. Now I have another issue finding out how to somehow get around this Bluetooth issue but that's another topic. This question here can be closed / marked solved.
I am working on a news website, trying to implement amp. We are using Mobile_Detect.php to serve desktop pages to desktop and tablets, and mobile version to mobile phones and that works OK, our pages are mobile friendly according to Google for some time now, no problem.
Now, I started to enter the code for amp pages and encountered a situation I can' resolve. URL for the amp version have .amp at the end. Depending on the user's device, we are generating the page from the database and serving different pages to different devices.
Now, PageSpeed Insights and Mobile-Friendly Test shows that the page is mobile friendly but amp validator is pulling the desktop page, I can see by the source code it prints out, instead of a mobile page. I'm on the desktop, Chrome, but I'd expect it to work with mobile pages.
You can see that here: https://validator.ampproject.org/#url=http%3A%2F%2Fwww.poandpo.com%2Fbusineasdfasdfas-usual%2Fpublic-housadfadf-kong-972016223.amp
I installed Chrome amp extension and it says "AMP available" but when I click on it it also pulls the desktop version of the page and it's blank. I would expect the extension to load the mobile page but it doesn't.
We do have links canonical and amphtml, that's why the extension says there is an amp page.
So, how to tell validator to pull the mobile version of the page? The amp implementation is not done yet and I know there are some things missing, but without a validator is a bit hard to program.
Another interesting things is that when I open "Inspect" in Chrome and toggle to responsive design, it shows the mobile version of the webpage correctly. It also says "Powered by amp" and shows no errors although there are errors because we didn't even implemented all tags.
If anybody has any suggestion how to make amp validator to show the mobile page I'd appreciate that. Thank you.
I had a quick look at your pages but it appears that the amphtml reference but there appears to be a problem in the URL you are generating in the href= field. If you take a close look, the AMP URL is missing a '/'.
Broken: http://www.poandpo.com/business-as-usualmexicans-work-longest-hours-germans-the-least-97201645.amp
Works: http://www.poandpo.com/business-as-usual/mexicans-work-longest-hours-germans-the-least-97201645.amp
I'm looking to embed an existing survey monkey survey into a webpage, following the instructions here:
http://help.surveymonkey.com/articles/en_US/kb/Website-Collector
which is working perfectly on desktop and tablet sizes, but for some reason not working on mobile (either on an android device or in chrome emulator)
The following steps appear to be working:
Loading embed script into the page
Embed script calls surveymonkey.com, and retrieves the SMCX script
SMCX.boot() is called
But, the survey (or its markup) does not appear in the page.
Has anyone else run into this issue? What other additional information can I provide?
The Website Collector used to work everywhere, but they changed their API and now document that mobile is not supported.
http://help.surveymonkey.com/articles/en_US/kb/Website-Collector
"Website Collectors display on desktop browsers only—not on mobile devices or tablets."
It's actually worse than not supporting mobile or tablets, their surveys don't even load on desktop browsers if your browser is currently 760 pixels or less wide.
The solution is to just iframe the web link in manually.
<iframe height="500" width="500" src="https://www.surveymonkey.com/r/XL3DDMS"></iframe>
In addition to the answer of using iframe, for iPhone, both in Safari and Chrome rendered a weird view (the spacing between each question is extremely large), and I finally tackled it by turn off the "One Question at a Time" option, hope this helps someone.
I noticed my images on a website are blurry when using a mobile device. This occurs only when I'm using 4G and NOT when I'm connected to wi-fi. If I'm connected to wi-fi, the images look fine.
I realize a slower connection may be causing this, but I'm curious how I can fix it. I downloaded a "Resize Image Quality" plugin for Wordpress and that didn't work.
Are there any changes that can be made to CSS to fix this issue? I'm never had this issue before with Wordpress or any other CMS.
Here's a link just in case it's needed: http://bit.ly/1J1vwFB
That's weird, I used chrome with network throttling and emulating different phones.. It looks fine, have you tried other phones?
I'm developing a web application with AngularJS and I'm using a directive for embedding responsive Youtube videos called youtubeResponsive which allows to embed videos in an iframe with a video id as source parameter.
It all works perfectly on desktop browsers, in fact I also managed to embed a playlist and play it in a loop.
The problem I'm having is now on Chrome Android, on a Nexus 5 device (running Lollipop latest update) the video embedded is not showing and instead I can see a notification of a download going on. Every time I refresh I see the download process restarting but no video is showing. If I click on the download notification to see the file nothing happens.
Of course my aim is to display the video also on mobile with autoplay and loop active.
The output which I can see inspecting the page on mobile using USB debugging (chrome://inspect/#devices)
<iframe id="ytplayer" type="text/html" width="100%" height="202.5" ng-src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque" frameborder="0" allowfullscreen="" video-slug="ZhfUv0spHCY" class="ng-isolate-scope" src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque"></iframe>
I don't see any error on mobile except the same warning I can see on desktop which apparently is not blocking the video from playing at least there.
Resource interpreted as Document but transferred with MIME type application/x-shockwave-flash:
"https://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque".
Anyone experienced the same issue on Android Chrome or on other mobile devices and OS ?
I haven't started testing on AOSP or iOS yet but already on Chrome the issue is quite concerning. Let me know if anyone managed to fix it.
You're specifically requesting the old Flash player widget and not allowing it to upgrade to HTML5, which is required now for mobile support of any kind. You should switch to the YouTube Player API, which requires a few extra lines of code to implement but will work almost anywhere and give you a lot of event data back about videos playing, etc.
https://developers.google.com/youtube/iframe_api_reference
You can still use an IFRAME with this technique, although consider this directive which appears to support the current API:
https://github.com/brandly/angular-youtube-embed