I am getting so annoyed with this problem (A problem repeatedly occurred error message) on ios iphone. Working hard to build a website but only iphone with recent ios versions has this problem. Thought chrome will load the site on iphone but same problem. It's some ios efficiency issues. Getting rid of css transform and animation didn't solve it for me. My site was designed on adobe xd and I exported it using web export and got some javascript to scale it for any display size. I don't know how the page artboard size was too big like width: 3554px and height: 2346px. Never faced any problem on windows and android. Recently iphone testing made me so disappointed. The javascript isn't causing the problem here even though there is transform scaling involved. I tested an initial version of the website where the javascript scaling didn't cause any problem. Then I cleaned up all animations and css transform. But still same problem. Is this because of big page size like width 3554px ...? Can't safari handle this ...? Please help me to solve it. I don't want visitors from iphone get disappointed on my website. I have some article pages which use css media query with like page width 2358px less than the home page. I don't have iphone but checked on friend's iphone that the article pages load but home page doesn't load. Fun fact I have this thing implemented like when you auto rotate webpage will go to full desktop site. Both home and article pages have same problem. But old ios versions didn't show this problem. If you have an iphone please check the links if you know what is the reason behind this. Thanks in advance everyone ... help needed ...
Home page
https://elomymelo.com/index.html
Article page
https://elomymelo.com/jbl%20flip%206%20meaningful%20upgrade.html
I don't have mac book. So if you got mac on latest os and safari please check it and let me know if there is this problem on mac os or not ...
CSS
#Web_1920__1 {
position: absolute;
width: 3554px;
height: 2346px;
border: 0px grey solid;
background-color: rgba(255,255,255,1);
overflow: visible;
--web-view-name: Web 1920 – 1;
--web-view-id: Web_1920__1;
--web-scale-to-fit: true;
--web-scale-to-fit-type: width;
--web-scale-on-resize: true;
--web-center-horizontally: true;
--web-enable-deep-linking: true;
}
Those variables are for javascript and they're not causing the mentioned problem in the title ...
I've been debugging a similar issue reported by our userbase of individuals experiencing Safari on iOS 15.4.1 / 15.5 crashing with this error message of "A problem repeatedly occurred"
After some investigation, I've discovered that the issues likely has to due with iOS/Safari's update to WebGL 2.0 / WebGL for Metal, and issues with CSS #keyframes animations.
Specifically in regards to the issue I was experiencing, if there is a child element that has a CSS opacity rule applied to it within a parent element that has a CSS #keyframes animation applied to it, Safari would crash after several seconds and display this error.
If I removed the CSS opacity styling rule from the child element within this parent element that has the #keyframes css animation applied to it, OR if I just removed the css #keyframes animation styling rule from the parent element itself, this resolved the issue and the crash no longer occurs.
This issue does not appear to affect iPadOS 15.4.1, only iOS 15.4.1 or greater.
There's definitely some bugs that reside in this latest iOS / Safari update and I believe they are all related to this new WebGL 2.0 / WebGL for Metal integration (as per similar issues I read about here and here)
I have also reported this issue on the Apple Support forums, in hopes that they will address this in a future update.
Related
Since Apple's recent update to El Capitan on desktop and iOS 9 on mobile, the css displays of our website have not been working. I am attaching two screenshots. The first is full screen - not only is the css ignored, but the photo content is not displayed. The second is a minimized screen which deploys our #media queries for the responsive design. Our code worked on OSX and iOS prior to the updates and works on all other platforms.
Here is the desktop screenshot:
Here is the mobile screenshot:
After fixing Safari errors in above code, I still have the issue - css not rendering correctly on kuttlefish.com (since ios9 and El Capitan Mac updates). One behavior I found that may provide insight: below 603px, the photos on the page suddenly appear. Above 603px, the photos don't display. I am pasting my #603 media css here for anyone who may have an idea. Tx.
#media only screen and (max-width: 603px) {
#contact-form{width:95%;}
.box {width:47.6%;float:left;position:static !important;margin:5% 1% 0 1%;}
.box .preview .thumb{width:100%;height:321px;}
.big-box {width:97.6%;}
.big-box .preview .thumb{width:100%;height:743px;}
.box .idata .description{width:100%;}
.fancybox-wrap{width:96.5% !important;}
#categorieswrapper{height:110px;}
}
~
You have a few errors in your bundled CSS. Chrome (and other browsers are much more forgiving about syntax errors).
Look in the Safari developer tools (here are instructions on how to enable it) and you will see errors in the console. There are a few syntax errors in your CSS, here is an example of one:
In the above you notice the asterisk before the border property, that is invalid CSS. As noted by other users there are a few others, see the comments.
However there are too many to list here, you need to fix them all to get the site to render properly:
I'm building a very basic webapp that displays ferry schedules.
I'm using phonegap to port it to a "native" app on Android and I'm have a bit of trouble with the scrolling.
It works perfectly in Chrome on the device, as well as on the android browser. I've tested on several devices and they all work great in browser. As soon as I put the project into Phonegap however the scroll becomes very "choppy" and skips and sticks. I've added a video link to show you the behaviour:
http://youtu.be/D18s9kgnD7g
I'll give you a brief explanation of how it works:
We're using translate3d CSS methods for transitions when we switch content in view so that we avoid using page transitions. Because of this we're not scrolling the actual page we're scrolling individual content divs so that we avoid weird scrolling bugs when switching between content views. Basically we have three "content views" on one page that switch out when we want to switch views.
Here's a link to the app:
http://ferriesapp.ca/app/
Things I've tried
We're using "overscroll: scroll;" one these content divs, which I know had some incompatibilty with Android pre 2.3 but should be good now.
We've tried a few big libraries, like iScroll and Scrollable, and things like that to no avail.
I've tried preventing default actions for touchmove.
We've coded correct touch events using Zepto's touch module.
I've tested on devices from the Nexus one (4.0.4) to the Nexus 7 (4.3) and it's the same story on all those devices.
Any help would be STRONGLY appreciated
I've been struggling with this for a while now and I can't seem to find anything on the internet that hits on this "choppy" scrolling bug.
EDIT: Here's a logcat from installation to when the scrolling bug happens:
http://pastebin.com/Aa7mDeAX
You got a pretty nasty style sheet there. First, you do not want any box shaddow because mobile does not like that. Then, since you have a lot of blank spaces, you want to help touch to work better with those blanks with user-select: html.
* {
margin: 0;
padding: 0;
-webkit-user-select:html;
-khtml-user-select:html;
-moz-user-select:html;
-ms-user-select:html;
user-select:html;
}
That should help with your scrolling, but you still have tons of thing to clean up with that CSS. Another issue is that you don't even have cordova loaded correctly, but that probably doesn't really matter for scrolling.
Actually, what is zepto_002.js? That seem to be the one that is causing the main scrolling issue.
As a fellow google play developer, having "three "content views" on one page that switch out when we want to switch views" is not a good idea. my only input though if you want to go this path would be to check this out http://pocketnow.com/2012/05/25/what-is-force-gpu-rendering-in-ice-cream-sandwich
This issue does not present on iOS or on Chrome so it is not a Webkit related issue. It seems to be specific to the latest Safari 6.0.2 on OS X 10.8.2 (and not fixed by 10.8.3 preview build 12D65 which comes with Safari 6.0.3). I shall test on Lion 10.7.5 with Safari 6.0.2 shortly, and will also be testing on preview build 12D68 as well.
http://jsfiddle.net/zrr2b/
Here is a fiddle that makes the problem quite apparent. If you've got a Mac running ML, you should see a significant difference between Chrome and Safari where Safari flickers a lot as you move the mouse around.
Basically the problem is that Safari will intermittently draw the target transform being set from JS for a single frame, then continue the transition animation. This causes a flicker, but only if the transition was in the middle of going somewhere to begin with. So the bug won't rear its ugly head for most (non intensive use) of CSS3 transition, but if functionality or visual effects depend on it to smoothly interpolate to a target (as my current project does) this flicker is not pleasant.
I have looked at similar topics related to flickering and applied pretty much all combinations of styles to counteract flickering, such as the -webkit-backface-visibility: hidden, forcing various parent elements to gain hardware acceleration, -webkit-transform-style: preserve-3d, -webkit-perspective: 1000, and none of them unfortunately do anything to address this Safari-specific problem of flickering, that is, flickering not to white or blank, but flickering to the target transform for a single frame.
Here in this branch you can see me set a bunch of styles that help with "regular flickering" but have no effect for me. http://jsfiddle.net/zrr2b/1/
As this is not a webkit specific issue I am unsure where to go about posting a bug report. It would be especially nice to get this in before 10.8.3 release since I see this as a rather big issue. Remember, this is the sort of thing that we're depending on HTML5 to do well in order for it to really kill Flash.
Updates:
Safari Version 6.0.3 (8536.28.10) on Mountain Lion 10.8.3 12D68 (Retina Macbook Pro 15.4") still suffers from this issue
Safari on Windows (5.1.7) does not suffer from this bug
Safari Version 6.0.2 (7536.26.17) on Lion 10.7.5 (Macbook Air Mid 2011) does not suffer from this bug
There are a few different ways of experimenting with reducing the flickering. The big problem however, it's that they seem to be "hit and miss". So you got to try a few to see which one helps resolve the issue.
But they center around the same few things:
-webkit-transform: translateZ(0); /* triggers GPU, sometimes fixes the issue */
transform: translateZ(0); /* non-webkit specific */
If this doesn't quite do the trick, try:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
If this also fails, try this:
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
You can read about each one of them through the W3C. But they have all worked for me on different circumstances with not fluid animations, and flickering ones, including some very odd ones, a lot jumpier than your fiddle.
They would go in the div being animated.
I'm going steadily more mad if this continues:
Firefox versions 6 - 13 seem to have serious image-rendering performance issues on Mac and Windows XP.
Whether I move multiple Images around in a DIV via position: absolute; left: Xpx or using CSS3 transform: translateX(Xpx); or even in a canvas element the images stutter heavily while being moved around.
You can check my latest Canvas test here: http://jsfiddle.net/5YCmH/6/
My question is; why is this happening?
As I see and read it on the web CSS3 and Canvas should be hardware accelerated by now.
So I checked the various settings in about:config and even reset them to default. Nothing works. While Safari and Chrome are rendering everything smoothly, Firefox looks like IE7.
I tested on 3 different machines, same problem everywhere. Whats happening people?
Any pointers or insight would be helpful!
PS:
I haven't used FF much since I switched to Chrome like one year ago. Before that I made an image sliding widget and tested it in FF 3.6.xx and it worked smoothly (using the position: absolute; left: xx; approach). Now I'm testing code I primarily developed in WebKit browsers also in FF and it doesn't work at all.
Is this real life? I feel funny.
EDIT:
Here's another fiddle showing the same stuttering with old-school animation: http://jsfiddle.net/XZAE6/3/
And with CSS3 translateX(): http://jsfiddle.net/h3UNk/3/
To answer your question: Yes, this is real life... ;)
The problem could possibly be remedied by using smaller images. Your aquatics.jpg is 193 kilobytes and velodrome.jpg 140 kilobytes. I'm sure the size can be reduced by at least 50 % without noticeable loss of image quality.
A website I'm currently designing displays and works perfectly in all mac browsers, and Windows Firefox, Chrome and IE 8.
I'm having major problems in IE 7 though. Whilst the CSS is pretty much there (a few tweaks needed), the site is maxing out my CPU at 100% rendering the site almost unusable and giving me scripting errors and javascript functionality is not working.
I don't even know where to start trying to find out what's maxing out the CPU, or how to get more info on the scripting messages - it tells me the line the problem is on but it doesn't tell me what file.
I'd like to provide a link but the client has asked me not to.
Any help would be greatly appreciated.
Thank you
Most likely, this issue is caused by ie's poor png rendering capabilities. In the situation that I have experienced, we were using jquery ui 1.8.7 to render modal dialogs and seeing the memory usage spike by 6-8 mega every time a dialog box was opened. It turns out that the culprit was the opacity and alpha CSS settings in the default jquery styles. See this post for a possible partial fix.
Other things to note include:
There seem to be many fixes that attempt to address this issue.
Jquery 1.8.16 has a partial fix where the large memory jump will only happen when the first dialog box is opened.
We have also experimented by setting a single pixel png as the modal background and this rendering of a single pixel caused the memory used by IE to spike 80 megs and caused a temporary spike in CPU usage.
One other peculiar observation was that if we set the modal value of the jquery dialog to false and created our own modal background by appending a div whose background was set to a semi-transparent png, the memory leak seemed to be smaller.
The short of it was to stop using transparent pngs and the opacity and alpha settings foe rendering in IE.