I have stumbled upon very strange problem with latest iOS update. From time to time, images get distorted while scrolling.
Here is the screenshot.
This problem only appears in iOS 12.0 safari. Sometimes it takes a while, scrolling up an down, to reproduce this issue.
I have tried to pinpoint elements which might be causing the issue in HTML, but so for no luck.
I have also hosted plain HTML page on AWS without any java script, and problem can be reproduced there as well:
http://ec2-52-56-231-146.eu-west-2.compute.amazonaws.com/demo/Dagligvareportalen.htm
Maybe You have some ideas?
I know it's kinda too late, but hey, I got the same problem so here we are :)
in the dynamic elements don't use css filter; that's all.
get rid of filter: ... and you'll be free of that bug
Related
I am having a problem with iOS scrolling on an iPad. Every other platform tested works just fine. I love iOS, but hate it too. I was able to get the entire iframe contents scrolling within the parent, but there are two DIVs that are fixed that shouldn’t scroll within the iframe.
Before I spend a lot of time trying to work this out, I am just looking to leverage everyone’s experience for whether it, in fact, CAN be done. If it IS possible, then I will proceed to trying to work out a simple model and report it back for others. If experience shows that it can NOT be done, then you will all have saved me a lot of headache, not to mention time.
Here’s a drawing of what works on all other platforms but NOT iOS:
Simple question: Is it possible?
The simple answer is, in fact, YES.
I have an app that a couple of clients are using, and we've noticed that during certain cases of using the app that the view moves up when using the keyboard. Which, the view then becomes stuck there, like space is constantly being added to the bottom of the view, making it look like the bottom of the view.
This only appears to happen on iOS (devices are using either version 5, 6, or 7), but not Android. I've tried changing the option KeyboardShrinksView directly in the iOS project (we use appery.io and are building the iOS project by exporting it through Appery).
The last time I looked at the problem as several months ago (we're beta testing a much larger project) and I did see others online saying that they experienced similar issues. So I don't know if others still have this issue, or don't now with the semi-recent release of phoneGap 3.3.
Even if this question has been asked before, I'm hoping that the issue will get back to phoneGap.
Thanks
i've seen similar issues been solved by adding height=device-height to your viewport in your html.
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
if that doesn't work, try forcing a page redraw on input blur, like shown in this post:
https://stackoverflow.com/a/18856929/1656561
I'm experimenting with different techniques using Amazium here http://stevengeorgeharris.com/croft/croft; when viewing on an iPad the image of the ballet dancer is missing, yet appears on everything else including Nexus 7 and iPhone 5. I have played around with positioning and z-index's but nothing happens.
I then went into IOS simulator to use web inspector and I noticed when I refresh the page the image appears and quickly disappears again. I cannot for the life of me find the cause of the problem, maybe I am over looking something very simple, as I usually do.
Change position:relative to position:absolute for it to show up on iOS.
i just see the website try to add overflow:hidden it will be good in regular explorer but it will not work in iOS but look nice
I want to create a wysiwyg-editor for ipad and have a toolbar with position:fixed - so that it's always available.
However, when I focus on div with contentEditable="true" the toolbar is not fixed any more.
Is this a bug?
Is there a workaround?
just found this while looking for the same thing - for the same reason...
we have a half-way solution to the toolbar, but it sort of wanders off-page and then resets to the correct position when the scroll finally stops. The solution isnt pushed to github yet, but it will be in the next couple of days. Best approach we have so far is a chunk of JS that forces the div back in place if we recognise we are working on iOS :-(
But you might want to check the editor we built in any case :-) http://www.quink.mobi or https://github.com/IMD-Business-School/Quink.
Does anyone know if the iPad has any limitations on the canvas tag?
Currently I'm working on a creative that uses a flipbook and audio tag combination to simulate inline video content. The animations are drawn to the canvas element and synced with the audio content being played. There are 4 short video clips that get played when someone clicks on the four buttons below.
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungfupanda2_test/
The problem I'm having though is in iPad. After playing a few animations, mobile safari just suddenly crashes. It never happens when I play it on my iPhone but it happens every time on the iPad. Its not one particular animation either because if I click a different combination of buttons, the previous clip that it crashed on plays fine, and then it decides to crash on another clip.
I think the problem might have to do with the amount of memory Safari gives individual page views. I found a blog post that explains that problem pretty well.
http://roblaplaca.com/blog/2010/05/05/ipad-safari-image-limit-workaround/
According to that post, once mobile Safari reaches a particular threshold of memory, images begin to return blank. This is consistant with my finds so far. The iPad that I'm testing this all on is running iOS 3.2.1 (and before anyone tells me that I should just explain to my boss that nobody uses 3.X anymore, I tried... they still want me to investigate this). I borrowed a co-workers iPad running iOS 4.2.1 and that device didn't crash, but some of the images weren't being drawn to the canvas.
I'm pretty sure its a problem with the canvas tag too, because I tried experimenting with running the animation without drawing anything to the canvas element, and the page never crashed.
Thats why I think maybe its a limitation with Safari's support of the canvas tag. Of course, I'm open to anybody else's suggestions.
Feels kinda weird answering my own question again, buuuut I figured if anyone did a search on this kind of question, an answer would be helpful.
I believe my original hypothesis was correct. The total amount of images that the aniamtions were using was around 600+. I think the older iPad loaded as many as it could and then when it ran out of cache and the canvas tag was trying to draw images that weren't really there anymore, it crashed.
Eventually we ended up serving the ad to devices with iOS 4.2 and higher, since the problem didn't seem to occur on those newer devices. Plus, we compressed the image sizes further, so that helped reduce the amount of images we were storing into memory.
If anybody knows approximately what the cache threshold in iOS 4.2 or higher browsers are, I'd appreciate it if you commented. Just want to get an idea of how many KB of image data I can safely load.