I'm developing a website and have recently run into a problem when testing on my iPhone X - the site wont load.
Safari tries to load it, then reports the error 'this web page was reloaded because a problem occured', and after a couple of tries it gives up and reports 'a problem repeatedly occured'. Chrome on my iPhone also doesn't load the site.
At this time I can't share the website publicly, but there are no errors reported in the chrome desktop console. In fact, the website runs perfectly fine on my desktop, my laptop, my old iPhone 6 and 5s, my friends Samsung android, and 15 other random computers and phones I've tested it on. It also loads fine in xCode simulator. But it doesn't work on my iPhone X.
My research across SO and the internet in general has led me to believe this error is usually due to excessive memory usage, but desktop Chrome reports the memory usage peaks at 20mb only. Also the site loads just fine on my inferior iPhone 5s.
I have cleared the safari and chrome caches on my iPhone X, toggled block cookies on/off, reset network settings, and restarted the phone.
My worry is that if my iPhone X doesn't load the site, no doubt other users will have problems, even if the 20 miscellaneous devices I have also tested work just fine.
Does anyone have any idea what is going on here?
I ran into this issue today and wanted to see the MRE that would cause this to happen. It does seem to be the case that both Safari and Chrome on iOS 14 crash when the autofocus attribute is set on at least two <input> controls, and focus is then requested on either control using JavaScript. I was able to confirm that the crash doesn't occur on iOS <= 13. Chrome 87 and Safari 13.1 on macOS are also unaffected.
Whether the crash occurs depends on when focus is requested. In the 'window load' event, things keep running. When requested in the 'document ready' handler, or at the end of the document, things go bad.
Setting the autofocus on more than one element doesn't make much sense, but the browser shouldn't crash. The JavaScript fallback may be used to provide a consistent UX for browsers that lack support for the autofocus attribute. The obvious fix for this is to remove all conflicting autofocus attributes.
/*
// Load event on window object: NO CRASH
window.addEventListener('load', (e) => document.querySelector('input[name="field_1"]').focus());
// DOMContentLoaded event on document object: CRASH
document.addEventListener('DOMContentLoaded', (e) => document.querySelector('input[name="field_1"]').focus());
*/
// End of document script: CRASH
document.querySelector('input[name="field_1"]').focus();
<!DOCTYPE html>
<html>
<body>
<form>
<p><label>First field<br><input type="text" name="field_1" autofocus></label></p>
<p><label>Second field<br><input type="text" name="field_2" autofocus></label></p>
</form>
</body>
</html>
I saw this same error message in Safari when I tried to access a webgl context in "high-performance" mode (using the powerPreference attribute on the renderer in a three.js scene).
Removing the high-performance mode allowed my webpage to load.
I have “solved” this by assuming this is indeed a memory problem and setting display:none to elements not visible in the viewport (by using a window on-scroll event).
https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2
This fixed the crashing in safari on my iPhone X. However it does not explain why this was occurring in the first place on a powerful device when the web app consumes under 20mb of memory and it ran fine on any other less powerful device I could find.
I faced a similar issue:
on my website (only on a specific page) iOS safari shows error message "a problem repeatedly occurred on my-page-url" without any errors in the console.
On all desktop browsers this page works fine, on all Android mobile phones also, but on iOS Safari page shows error...
After many hours of investigation, I have found that the problem was with the CSS property
height: intrinsic;
it was really strange, because this property works fine only on desktop Safari, on other browsers it was just ignored. But mobile Safari dies...
So I changed this CSS property and everything was fixed :)
Hope this will help someone to save few hours of debugging :)
Spent my fair share of debugging a similar issue.
For me it was due to the fact that I was using Vuetify, and had 2 text-fields that both had autofocus property set. Removing that extra autofocus from an element fixed it for me.
I ran into a similar issue with a page rendering a list of SVGs. Replacing the SVGs with PNGs resolved the issue.
Safari was crashing due to firestore hogging all of the memory, the issue is here: https://github.com/firebase/firebase-js-sdk/issues/6118 and fixed by initializing firestore like so:
export const db = initializeFirestore(app, {
experimentalForceLongPolling: true,
})
For posterity and future searches, I was pulling my hair out trying to debug this same issue in a NextJS app.
I was able to resolve this issue by removing a complicated CSS box shadow assigned to a container that can rapidly change size. The container changes its height vertically, and therefore can stretch the viewport. As soon as I disabled the shadow, smooth as butter.
Here's the shadow I was using if anyone was curious. I got it from one of those online box shadow generators. Didn't even think about the performance issues that could happen.
:root {
--shadow--lg: 25px 50px 62px -3px rgba(9, 9, 12, 0.34),
17px 34px 43px -2px rgba(9, 9, 12, 0.34),
11px 22px 28px -2px rgba(9, 9, 12, 0.34),
7px 14px 18px -1px rgba(9, 9, 12, 0.34),
4px 9px 11px -1px rgba(9, 9, 12, 0.34),
3px 4px 7px -1px rgba(9, 9, 12, 0.34), 2px 3px 4px rgba(9, 9, 12, 0.34),
0px 1px 1px rgba(9, 9, 12, 0.34);
}
Related
I use text-overflow: ellipsis in a webpage.
It does function as expected in Safari on iPad, but not in the webapp (link on home screen) viewed on the same device.
Is this a shortcoming of the iOS webapp implementation or am I overlooking something?
ANSWER: what happens is the iPad webapp cache does not react to clearing the Safari cache. So when I edit the webpage I don't see the change in the webapp.You need to add a manifest.
Text-overflow is pretty well supported, so I'm guessing something is going wrong here.
Do you also have white-space: nowrap; and overflow: hidden; set on the element as well? They're both needed to get the ellipsis to happen, as well as the container actually being small enough to trigger overflow.
An example of what happens when loading the website can be seen here for theverge.com.
No such problems occur on the latest browser and OS versions for:
Windows 8.1 - Chrome, Firefox, Opera, IE.
OSX Yosemite - Chrome, Safari.
Android 4.4 - Chrome, Firefox, Opera, Safari.
iOS 7.1.2(iPad) - Safari.
iOS 8.3 (iPhone 5) - Safari.
However, on two separate iPhone 4S devices (iOS 8.0.2 & iOS 8.1.2), Safari will continue to refresh the page, each time reading "problem occurred with this webpage so it was reloaded" until finally crashing and reading "A problem repeatedly occurred on [website URL]".
I have made sure that my JavaScript/jQuery are syntactically correct (as well as loading the webpage with JavaScript turned off in safari settings - same problem), cleared cache, restarted the iPhones and can not imagine what else could be causing the problem. The web page is only small with a total file size of around 300kb and only some fairly simple DOM manipulation.
From what I can tell of my own testing and what I have read, the problem is isolated to iOS 8.0.2 and 8.1.2 but obviously, my website is in the minority of sites that crash on the OS and I would like to know what it is exactly that causes the problem.
Thank you.
EDIT: Updated one of the iPhones to iOS 8.3 - problem still persists. Absolutely stumped at this point and any suggestions would be greatly appreciated.
Short Answer:
Check all of your CSS for animation keyframes and remove any font-size animations within those blocks.
Long Answer
The lack of any developer-centric conversations regarding "A problem repeatedly occurred on..." issues is definitely disappointing. After an hour of Googling tonight I stumbled on your post here and had to do a double-take when I saw the timestamp. // High five fellow trouble-shooter.
As luck would have it, I was able to track down a potential source for this iOS/Webkit bug within my CSS. Specifically it seems to be related to how Safari deals with font-size animations inside of CSS keyframes. I had something like this in my SASS:
#-webkit-keyframes labels-bottom {
0% { opacity: 1; color:#888888; top: 0.1em; font-size: 1.5em; }
20% { font-size: 1.5em; opacity: 0; }
30% { top: 0.1em; }
50% { opacity: 0; font-size: 0.85em; }
100% { top: 4em; opacity: 1; }
}
When I removed that whole block, it began working.
When I went further and removed CSS properties one-by-one, the crash seemed to be isolated to the font-size animation. It, however, does not appear to be associated with #font-face web fonts or if you specify size using different units (em/px/pt). All conditions tested caused the same crash. The only thing that fixed it was removing any font-size changes within my keyframe blocks, a la:
#-webkit-keyframes labels-bottom {
0% { opacity: 1; color:#888888; top: 0.1em; }
20% { opacity: 0; }
30% { top: 0.1em; }
50% { opacity: 0; }
100% { top: 4em; opacity: 1; }
}
It's possible (and perhaps likely) that other animated properties can trigger the crash, but this fix definitely worked for me and I hope it does for you as well.
PS: I tested this on both iOS 8.1.2 and 8.3 (iPads).
Inspired by #Evan Tishuk's answer, I scoured through my CSS but found that unlike him, I had no font-size keyframe animations. By process of elimination, I started deleting blocks of code, starting with those with vendor-prefixes and found that this was the code causing the problem:
.qanda{
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}
Very silly of me. The blur filter wasn't even needed on my site, just some code I was playing around with and forgot to remove.
In addition to the other answers which all point to CSS being the cause, I can report that complex JavaScript manipulation of JSON data objects can also cause this error. Specifically, loading a large precomputed search index (a ~1MB or larger JSON file) into a page for use with lunr.js will exhibit the above failure.
I thought it might be because of server-side compression (the 1MB JSON data was transferred compressed in about 200kB) but the error persisted after disabling compression, so I can only assume the problem happens internally to Safari while parsing the JSON data.
Interestingly, I can load the raw search data from a JSON file (size comparable to the index data that causes the crash) and build the Lunr search index in the browser - just can't load the precomputed search index from a JSON file.
Per Evan and Jack's answers, this is most probably CSS-related. Which styles exactly? That can vary.
I had the same issue: Safari on iPhone4 and iPhone6 was reloading the page until it crashed. Site was fine on iPad2, iPad Air, iPhone5, and every simulated device in IOS simulator (including simulated iPhone4 and iPhone6).
The CSS (OK, LESS) that was breaking the site:
ul {
.transform(translateZ(0));
a {
.transform(translateZ(0)); /* Right here, the nested transform */
}
}
Once I removed that nested transfrom Safari stopped frekin' out and all was good in the world.
I had the same problem while using an ASP.Net site. Turns out the ViewState was too large. Moving some ViewState variables to asp:HiddenField values solved the problem for me.
I have a strange problem. The website is using a template and on IPhone it is showing a strange black vertical bar on the right side.
I installed safari and activated the user agent. When I set the agent to the ipad, I am seeing the problem, but client told me its on his IPhone.
Strangely when I look with dev tools, it seems to be outside the html. What could be causing this? I have already tried to set html and body to 100% width and overflow-x to hidden, but it did not help.
I have included a screenshot:
I have never seen anything like this before. What could it be? thanks verymuch!
ADDITION:
Here a live example:
example offline, sry
Somewhere, at some point, you have an element with some extra padding, border or margin that is blowing things out. I couldn't track it down, but an easy way to kill it off these days is with this in your style sheet (which is commonly used as part of a standard reset):
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
That seems to fix the issue, although on your next project, I recommend not setting fixed widths, but rather use width: 100% etc, as users on screens narrower than 300px will still have issues.
ok, so its a render issue on iphones and window phones. I cant replicate the issue on google chrome and samsung galaxy. Due to the below...
Put...
<section id="main-top">
<div id="bg">
inside the .container. You will have to re-assign your background. But the problem is with the nav and background and the positioning of these divs.
Your nav is full width but the container isn't, you have the section and div ending within the container but starts outside of it.
I've got a problem with a simple webpage. It isn't quite finished but I tried this one with my iPad in Safari and there appeared a vertical scrollbar altough the document shouldn't be higher than the viewport. (only in landscape mode)
In Chrome for iOS and the desktop version (1367x768px) it's running nearly perfect & I don't understand why there's a problem in safari.
This phenomen is only appearing in Safari/iOS/landscape.
Hope it's more or less comprehensible.
Thanks a lot!
Felix
The following style is for the body tag and not the html tag:
height: 100%;
So, remove this style from html, body { height: 100%; ... } and this should solve the issue. Infact you can remove html from that block. It won't affect the output.
Problem is solved in Safari for iOS 8.
In recently testing a web application on Windows/Mac desktop browsers - and then on an iPad I noticed various differences in Safari that I wasn't expecting. Even though the version # is the same.
I'd like to compose a list of those differences (for myself and others) to have as a developer reference.
e.g. in Safari on the iPad
iPad Safari takes full control of Select list/option styling
iPad opens the onscreen keyboard when an input element receives focus, thus inline floating calendar widgets (and the like) may not work as expected (or need to be altered)
iPad Safari doesn't support position:fixed like desktop Safari < iOS 5
iPad Safari (similar to iPhone/iPodTouch Safari) automatically hyperlinks 10 digit numbers to offer phone #/contact options
iPad Safari prompt('long message...','default'); shows only 1 line of the message (though it does provide scrolling of the message
I've heard from others that certain JavaScript doesn't work, etc. etc. but I have yet to fully test it thus I'd be grateful for any discoveries that you may have encountered.
A few more for you:
No Flash
Lousy iFrame support (so facebook like etc. needs a custom implementation for iPad)
Weird caching limitations
HTML textAreas doesn't get a scroll bar (you have to double-finger swipe - which of course, is amazingly intuitive)
In general. Treat it like a scaled up iPhone, not a scaled down Desktop.
I thought this might be useful: Apple's guide to preparing web content for the iPad
Just been caught out by the position:fixed issue my self
Safari on iPad has the same issue with button width/padding as on the iPhone
iPhone <button> padding unchangeable? describes this problem and a solution for removing padding on a button with text, but this does not help you if you want a button to be narrower than the padding itself (e.g. for a button that only has a small icon on it). To do that, I had to surround the button with an outer element with a defined width and overflow: hidden like so:
<span style="border: solid 1px blue; display: block; width: 16px; overflow: hidden">
<button style="-webkit-appearance: none; border-width: 0"> </button>
</span>
(the blue border is to show where the button is, it's not critical to the hack)
jQuery's offset() doesn't work: http://bugs.jquery.com/ticket/6446
It also looks like iPad Safari has issues with elements with overflow:auto; that therefore should show scrollbars (test page with div's and iframe's).
iPad Safari seems to have trouble handling background images in rare cases, showing weird lines of lower lying content.
There's not a lot about this in Google (yet).
iPad browser doesnt support file uploading(even if it supports it will useless as iPad does not have a standard File Browser). The file field appears with a Choose File button grayed out.
Beside doesn't support scrollbar in TextAea, it seems that we can using javascript to make text in TextArea selected automatically too.
This code will only move cursor to the end of text in TextArea.
<div>
<textarea id="text-embed-code" autocapitalize="off" multiline="">
There is a fox running after chrome.
</textarea>
<button onclick="testSelectText(event);">select text</button>
</div>
<script>
function testSelectText(e) {
var box = document.getElementById("text-embed-code");
box.select();
e.preventDefault();
return false;
}
</script>
There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.
I just had the same bug on my site, when trying to view it on an Ipad. The HTML structure is like:
<div class="main"> <!-- background-color: white -->
<div class="left"></div> <!-- background-image: url(some_transparent_png) -->
<div class="content">...</div>
<div class="right"></div> <!-- background-image: url(some_transparent_png) -->
</div>
The left layer uses a background-image, whereas the main layer uses just a background-color. The Ipad view shows a slight border at the edge of the left and right layer.
When i add
-webkit-background-size: 100% 100%;
to the left and right layer, the border disappears.
You can now control the styling of select lists on iOS by resetting it with -webkit-appearance: none;
This rule fixes animation flickering in Safari on iOS devices:
body {-webkit-transform:translate3d(0,0,0);}
There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.
24 bit transparent PNGS ABOVE A CERTAIN FILE SIZE don't render on the iPad2.
I can however get 8 bit ones of the same dimensions to render.
I haven't found out what this maximum file size is in order to get them to render.
I'm currently working on a small responsive web-app which makes heavy use of the iframe youtube api. Apparently the ipad version of safari doesn't support a few html5 methods which I use heavily in this project.
One of them is window.postMessage, which is a way of interacting with scripts on other pages, for example the a script that is used "within" that iframe. Autoplaying videos also doesn't work.
Frame problems. iPad Safari will both hide scrollbars and expand frames to the size of their content.
Changing the frame tag to include scrolling="yes" and noresize="noresize" appears to do nothing.
Some sites look fine on everything, even a Dreamcast browser, but not on iPad. The issue can be fixed using tables and iframes instead of normal framesetting (cols and rows, etc).
I also discovered that contenteditable is not supported in mobile safari, thus using a plain textarea is a better bet. Apple Developer Docs
position: fixed;
Does not work in iOS 4 but does work on iOS 5.