I'm creating my first web app using React and I've implemented some 3D animations using React-Three-Fiber.
I've already deployed the page in github pages and while in Chrome on the desktop, both in the webpage and in localhost the website works flawlessly (has some freezes but that's not the point).
However, when I visit the page on an Android Phone, all the Canvas stop working and display the text multiple times whenever I scroll (I don't really know how to explain what's happening, so I'll leave this video: https://youtube.com/shorts/O0xXEElAjJs?feature=share . You can see that the problem only exists on the Canvas, since the Header is not a Canvas element).
I've tried to load the page on iPhones but it doesn't even load and just crashes.
On two of the Android phones I've tried, the page loaded nicely at start but after some time it started glitching like in the video.
I have absolutely no clue on what is going on, other than the problem lies on the Canvas that I have created.
I assume this is a simple thing that I might have missed but I'm really lost.
Thanks in advance! :D
Here is the webpage: https://pedrochaps.github.io/
Here is the code: https://github.com/PedroChaps/pedrochaps.github.io
I have develop a web site using angular.
My surprise is when I access the site in Chrome without the inspector.
The page seems be frozen. nothing works.
The problem was about the screen resolution. Not about the chrome inspector.
When the chrome inspector was down, so the screen get bigger and the problem arises.
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 have a weird issue where some content included via Edge Side Include is randomly missing. Its a menu wrapped in a header tag. Sometimes it displays in the browser sometimes its missing.
A few notes:
1) This only happens on mobile and tablet devices. I have been able to reproduce the error on an ipad, blackberry torch and an android phone (Samsung galaxy s3) using the default android browser, firefox and chrome for android.
2) I installed the Android SDK for debugging but received no errors. The only thing I found was everytime the header was missing there were also no cookies set which is odd. And then when the header was displayed there were cookies set.
3) The problem can be rectified by clearing all web data in the browser (cookies, cache etc).
The application is written in Symfony2.1
The reverse proxy server is Varnish
Any ideas?
UPDATE: There is a workaround to the problem. It is to force IE10 into compatibility mode by including one of the following meta tags:
<meta http-equiv="x-ua-compatible" content="IE=7" />
<meta http-equiv="x-ua-compatible" content="IE=8" />
This is not really a perfect solution for various reasons, but it eliminates the problem at least.
ORIGINAL QUESTION:
I realised a couple of months ago that there is a problem with our Silverlight application in IE10 on Windows 8 (I have not tried the IE10 preview for Windows 7). When the asp.net page hosting our SL app first loads everything works fine and the application loads as expected. If I refresh the page immediately, it also reloads as expected. But: If I focus the Silverlight application by clicking in it and THEN hit F5, it just goes blank. It is like the plugin disappears completely. If I trace the requests using Fiddler I can see that no request is issued for the xap file. I have been hoping that this would be fixed in a patch release for IE10, but so far nothing has changed. I cannot find any information about this when I try googling it. It seems highly unlikely that I should be the first person to discovered it and I am quite surprised that I am not finding more information. To reproduce the issue:
Create a new Silverlight application
Add some sort of content to MainPage.xaml, like a Button or whatever
Run the app in IE10 (on Win8)
Click anywhere within the Silverlight application. This is just to focus the plugin.
Refresh the page (F5)
Result: The Silverlight application does not load and the page is blank.
A few observations:
After the steps above, no amount of refreshing will bring the application back.
After the steps above, if I re-enter the url into the address bar and hit Enter, the application loads as expected.
If I enable Compatibility View in IE, the app also loads as expected. Nothing I do will reproduce the bug when compatibility view is enabled.
Now to my questions:
Has anyone else observed this behaviour?
If so, have you found a workaround?
I'm seeing the same issue with my Silverlight application in IE 10.
I've tried adding the IE 8 compatibility meta tag suggested above, but this does not resolve the problem consistently. It seems to work only intermittently, after say every 5th refresh attempt?!
The only way I can see to work around this consistently is to force the Browser Mode into "IE 10 Compatibility View", and I don't think this can be done via page content (meta tag, etc.)? I've had to remove the IE 8 compatibility meta tag so that the "Compatibility View" button is available in the address bar, and then ask users to click the compatibility button, which is then remembered for the site. This results in the browser entering Browser Mode: "IE 10 Compat View" and Document Mode: "IE7 Standards". The refresh behaviour then works consistently as expected and as it used to.
This is a big problem for us. We've built our Silverlight app such that the browser refresh button is used to refresh pages/content within the app (the users stays logged in, etc.). It's really bad that we have to ask users to set our site to run in compatibility mode for the refresh functionality to work as expected.
Note that this still works as expected in Chrome. It seems silly that we might need to recommend that our users use Chrome because of this issue!
UPDATE:
A workaround for this seems to be to always load the Silverlight object into its hosting page dynamically using JavaScript.
E.g.
function onLoad() {
var silverlightControlHost = document.getElementById("silverlightControlHost");
silverlightControlHost.innerHTML = "<object ...
UPDATE 2:
Here is the latest code I use to work around this issue:
...
function unloadSilverlight() {
document.getElementById("silverlightControlHost").innerHTML = "";
}
function focusOnSilverlight() {
document.getElementById("silverlightObject").focus();
}
function onLoad() {
window.onbeforeunload = unloadSilverlight;
setTimeout(focusOnSilverlight);
}
</script>
</head>
<body onload=" onLoad() ">
...
I still had issues with the solution presented by Chris.
This works perfectly for me though:
window.onbeforeunload = function () {
var silverlightControlHost = document.getElementById("silverlightControlHost");
silverlightControlHost.innerHTML = "";
}
I solved the problem in a very easy way. I Wrote a javascript code at the end of the page (or after the object tag in where is your silverlight app) and set the focus to another element, for example, a link. Example:
<object id="silverlightHostControl">...bla bla bla</object>
<script type="text/javascript" language="javascript">
var shc = document.getElementById("silverlightHostControl");
document.getElementById("myLink").focus();
</script>
The shc var is useless, I put just for clarify. Remember: your javascript code must set the focus to another (but focusable) object AFTER the silverlight app object tag was parsed, which means your js code is writen after silverlight app object.
In answer to your question #1, this is happening with our Silverlight apps as well. The only workarounds are 1) restart the browser or 2) switch to compatibiity mode.
It apparently is a bug in ie10.
Thanks for all workarounds solution but this is obviously a bug with Silverlight plugin.
We have raised few tickets directly with Internet explorer development team and they said the issue is from an external problem. It is not a good answer from Microsoft.
Anyway, this time our developers raised ticket through Silverlight development team which still waiting for their response. To get a good response from them, we need to get more people who are facing this issue.
You can vote this issue from Connect website which is Microsoft's official bug reporting platform.
The link to our ticket is: http://connect.microsoft.com/VisualStudio/feedback/details/789004/ie10-shows-blank-page-upon-refreshing-silverlight-app
Cheers
Moh
Yeah i am also facing same issue with one my application. If i opens help of my application in IE 10 then i have to refresh the page each time to view the contents.
I have two workaround for this issue:
1. Press ALT key once
2. Open IE in compatible mode