I'm tearing my hair out at this one.
On my iPhone 5s running iOS 7.1.1 everything regarding my web page is fine:
WEBSITE LINK REMOVED FOR SECURITY PURPOSES.
However, on iPhone 5s running iOS 9 I get the following error, that completely destroys / does not load the page, making it completely unusable:
"A problem occurred with this web page so it was reloaded"
I have searched high and low for ideas about this one but there appears to be no real direct cause.
One thing I noticed in my trial and error testing, is that if I remove the main app.min.css stylesheet, it will at the least load the page (DOM).
However, if I then load the CSS but this time with an empty file...the error appears. So it appears that it's not related to my CSS per se - just to the act of linking to it.
I've gone through and tried removing all scripts, images etc...with no luck. Removing the CSS is about as close as I have gotten to solving the issue, but even with a blank CSS file, the problem occurs. It makes no sense to me.
So to summarise what I know:
This appears to be triggered by the inclusion of my app.min.css
stylesheet.
Even if the CSS is included as a totally blank file, the error still happens.
Removing all JS does not solve the
issue.
It happens on any page, not just the landing page or any
particular area. Works fine on my older version of iOS but not the
newer 9+ on iPhone 5s
I'm hoping you can help. I would love to provide isolated code examples, but since this issue is so 'out there', I wouldn't know what to write up as a test case.
If there's anything obvious you can notice in dev tools I'd love to know. Thanks!
Here's a screenshot of the iOS simulator having the problem too:
After much debugging, I found the offending CSS that completely causes webkit browsers on iOS9 + to crash and burn (Safari and Chrome):
::-webkit-scrollbar-thumb:window-inactive {
// Properties
}
Removing this line now removes the error and loads the page correctly.
This problem was hard to debug because the iPhone heavily caches your CSS files. To get around this, cache bust your CSS when testing by appending a random query string to the end like so (PHP):
<link rel="stylesheet" href="/path/to/css/file.css?refresh=<?php echo md5(rand()); ?>">
Remember to remove this once your debugging is done so that you can take advantage of caching.
Twitter post here for sharing: https://twitter.com/michaelpumo/status/669478677600669696
Hope this helps somebody out there. What a pain it was!
Seems like your website opens only on Google Chrome. Safari crashed. Opening on Mozilla Firefox shed some light.
I see this error on the console downloadable font: download not allowed (font-family: "Tiempos Regular" style:normal weight:normal stretch:normal src index:1): content blocked source: http://example.com/wp-content/themes/future-cities/dist/fonts/TiemposTextWeb-Regular.woff
which is in app.min.css.
#font-face {
font-family: "Tiempos Regular";
font-style: normal;
font-weight: normal;
src: url("../fonts/TiemposTextWeb-Regular.eot?#iefix") format("embedded-opentype"),url("../fonts/TiemposTextWeb-Regular.woff") format("woff")
}
Take that font out of css and then try it. It should work.
Hope it helps!
Related
I have an issue with Firefox. In both responsive mode and Firefox Mobile to be accurate.
The touch scrolling isn't working on my website. (But the scroll with the mouse is working on Responsive mode)
It works fine on Chrome mobile & Safari mobile.
I checked online and I already tried the dom.w3c_touch_events.enabled set to 1. It was actually set to 1 by default.
I think it's an issue on the JS/CSS side but I can't see where.
I use SASS and Pleeease to compile it and it's a React app compiled with webpack.
Also I use the method fetch to call my webservices if it can have any influence but I doubt it. (and have a polyfill for it)
I tried to nuke totally my CSS and it still didn't work.
Happy to share URL if people want to see the actual problem. I just don't want to be seen as a spam. Also I will share a test server and not the live one. (problem is the same anyway)
Found the (stupid) solution and posting it as it might be helpful to someone.
I had a overflow:hidden; added by mistake in html, body { into my SASS.
For some reason the responsive mode in Firefox is still not working (bug? cache? I don't know...). But once I tried again on my Firefox mobile it was gone.
Looks like Chrome and Safari are ignoring this CSS but not Firefox.
For the record I am on last versions on all my browsers.
So i just finished up my website and uploaded it (New-ish web dev, please don't be to harsh). It works fine on all browsers except IE8. The website has a lot to load (images, etc.) so it is white screen for 1 - 2 seconds then fades into the actual site. On IE8 (IE9 + works just fine) the page stays on the white 'loading' screen forever. I have a lot of code here and I'm just wondering what you professional web developers here think i should do!
Website URL: http://cydronix.kkhorram.info/
There is two options: forget about IE8 or make it work on IE8.
Sounds like you have a problem with your javascript. To debug javascript on IE8, read this How to debug Javascript with IE 8.
I think one of your included .js files causing the issue. Check for the compatibility of your used javascript files
You said you uploaded the site - could you post the link if its live - otherwise without seeing some code the issue if difficult
I installed a WP theme recently and am having trouble getting a Facebook conversion box to display when I visit my site through Chrome. This problem doesn't exist on Firefox.
The response I get on Chrome is no visible pop-up box, but upon inspecting the element, I do see the code for the box in my header.php with a line from the Chrome User Agent saying:
script {
display: none;
Is there a CSS solution to override the User Agent and get the script to display? Again, I have no problems with the theme on Firefox. Here's a link to my site.
Thanks in advance!
I think I found the source of your problem. It's a browser extension.
Your conversion box appears on my personal laptop. However, it doesn't on my work laptop. That lead me to believe that it was a conflict with the script & a browser extension. So I opened your site in an incognito window. Voila! it worked. The next step was figuring out which extension was blocking it. For me, it is LastPass (my work requires the use of LastPass).
If you have LastPass enabled as an extension, disable it. Then test again.
It'd also be a good idea to get these console errors figured out:
Uncaught SyntaxError: Unexpected token ; (index):476
carouFredSel: No element found for "#foo1". jquery.carouFredSel-6.2.1.js?ver=3.8.3:4232
Uncaught ReferenceError: paginateVal is not defined cgview.js?ver=3.8.3:28
Solutions
Unfortunately, there isn't much you can do about people's individual extensions. If this is an absolutely critical feature for you, I'd look at finding a different implementation of it. One that does not conflict with common extensions (that's the easy option).
The other option (harder) is to look into the code of the plugin/script that you're using for the conversion box and identify the conflict.
Last option (hardest) is to look at LastPass extension source code and identify the bug that is preventing other scripts from running. I've had issues with LastPass interfering with javascript in the past.
Can anyone help me figure out why this page causes Android browsers to crash?
http://thewellcommunity.org
All sub-pages seem to work just fine, but when I load the home page on an Android, the browser app just closes without any warning or error messages. I've tried this on 3 Android phones and on a Kindle Fire.
When I completely disable JavaScript in the browser on the phone, the page loads successfully. Unfortunately this is a live website, so I'd prefer to save disabling chunks of JavaScript on the server side as a last resort.
On a side note, Opera Mini, Opera Mobile and Firefox on an Android phone do not crash, but Dolphin, Miren and the stock browser do.
UPDATE: It appears that I spoke too soon when I said this was fixed. I was able to reduce how often the browser crashes, but it still does occasionally crash when the page is loaded. :(
UPDATE #2: It now appears that the crash may be CSS related. After spending weeks enabling and disabling various JavaScript snippits, I tried disabling the stylesheet, and now I can't get it to crash.
Anyone know of an Android CSS bug that might be causing this? My guess is that it's related to some CSS that only gets accessed after the JavaScript does it's work.
I found the culprit... It appears that a css font-family rule was to blame. Although, I'm not sure why since the same font stack is used several other places on the site. :\
Here's the line that caused the problem...
.Site-Search .Buttons input
{
...
font-family: TeXGyreHerosRegular, Arial, "Helvetica Neue", Helvetica, sans-serif;
...
}
For whatever reason that line caused all stock Android browsers to crash. Weird.
Check out Weinre. An explanation can be seen in this youtube movie.
That way you can debug the Android webkit browser just like the well known Firebug.
In Eclipse's emulator (2.3) it loads fine but has some layout flaws.
If anyone came here looking for a possible reason why all of their mobile's different browsers crash after a several seconds when loading a particular website it may be due to the version of jQuery employed.
For example, the LG-p690f and HTC Incredible S are some of several Android 2.3.x phones known to have troubles with fade transitions in jQuery 1.8.1 and 1.8.2 due to a browser javascript bug that will cause jQuery's Animation function to fail at this line:
percent = 1 - ( remaining / animation.duration || 0 )
If you are the owner of the website you can try upgrading to 1.8.3 (or downgrading to 1.7.x if allowed). Otherwise, you can send an e-mail to the website.
Sources:
http://bugs.jquery.com/ticket/12497
https://github.com/jquery/jquery/pull/1019
Apologies but this is not a programming question, but it may have a programming answer.
For some reason my site, http://pctools.alwinsights.com will not display properly in IE (I'm using version 8) but it's fine in firefox and chrome. The content does not appear in the centre of the screen in IE and also generates two JS error messages while the pages are loading.
I've tried enabling Active X and Scripts in the security settings but with no joy. I've also looked around the net but cannot find an answer, well not one that works!
Unfortunately I know nothing about javascript so really don't know where to start with the error messages that are generated.
Any help appreciated.
regards
Nigel
Update:
OK initial error has gone, I'd screwed up with a directory name - apologies.
I've found out that if I disable the option to display the last twitter feed in the wordpress theme it loads OK. So it is the JS code in a php script called thememx-document.js that is causing the error. The code generating the error is "var twitterHtml = jQuery.cookie(twitterCookieName);" It says it's charcater 4, which is a space but I don't understand this.
I can live without Twitter on this site but it still leaves issues as to why content isn't centred nor the pop-up ad is not showing (compare to Firefox) but this may not be a programming issue that warrants a question on this site.
Thanks to all for your comments and input.
Nigel
Start with valid code; a validator will pick up lots of problems. Among yours is content before the Doctype, which triggers quirks mode. Quirks mode causes browsers to emulate bugs in ancient browsers and become much more inconsistent with each other. One of the emulated bugs in Internet Explorer breaks standard centring techniques.
for not properly disply-- its the problem of CSS ...IE7 and IE8 dosen't support css3.so you should simply make another css stylesheet for IE and call it on page only if someone visit your site using IE. and for other broswers it will show exiting style.
and abot JS error --you should check all your php coding and then fix it. its not JS problem. if you are not familar with PHP coding then i am here to offer my free service to you or anyone else. i will help you as i can.
First, having problems with any version of IE is expected and the norm. IE is the worst browser on the planet.
You have a link element on your first line. Links belong inside the head element. Placing it on the first line throws IE into 'quirks mode' and then IE becomes even worse than it normally is.
Good.
OK, maybe your site has to work for IE. 9 times out of 10, the problem is a terminal comma. The following is understood in real browsers but generates an unintelligible error in IE:
var x = [ 1, 2, 3, ];
The tenth time (in my experience), it's string indexing.
var x = "abc";
var c = x[2];
In a real browser, c is set to "c"; in IE, another unhelpful error message.
If this helps, remember: in IE, it's very important to create as many circular dependencies as possible. That is, attach to DOM elements JavaScript functions that have references to other DOM elements. IE fails to clean up such dependencies when the user leaves your site and so leaks memory. Once it leaks enough memory, IE slows and eventually freezes the OS and the user learns a valuable lesson: don't use IE. (Microsoft has a good page explaining how to do this although, inexplicably, they recommend against doing it.)