iFrames inside fixed height block elements won't scroll on iOS devices...
About once a year, I'll encounter this issue while testing something I made on an iPhone or iPad. I have a moment of confusion / frustration, then I remember "Oh yeah... this STILL doesn't work."
My question today is WHY is this?
In case it's not clear, I already know that you can't scroll iframes within fixed / absolute position divs and I'm not asking for work-arounds (those are well documented elsewhere). What I want to know is why. After 3 years or so, it doesn't really feel like a bug anymore. Does Apple want it to be this way? Did Uncle Steve hate iframes almost as much as Flash? What's going on with this?
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.
After pushing my site to the development server, I'm seeing horizontal scrolling on iOS (which I wasn't seeing when developing locally). I'm using an off canvas navigation menu which is giving the page the extra width. Here is the site.
Any help is greatly appreciated. Thanks for your time!
I inspected your site in Desktop Safari and I see the same issue.
The issue seems to be that the site layout still thinks it's wider. At first I was certain that a simple application of overflow-x:hidden and width:100% would do the trick.
However—
You seem to have done that.
It didn't.
I found it difficult to sift through the CSS because you have a lot going on, and I think it's possible that the CSS3 transforms are contributing to the issue, but I was able to lock it down while viewing in Desktop Safari and while inspecting Mobile Safari directly with the following:
Apply position:fixed to your primary navigation, rather than position:absolute. Desktop Safari was happy with this.
Remove your .site-content::before pseudo-element. This was still causing the issue on Mobile Safari. Removing the CSS transform to translate3d(100%,0,0) also helped.
Side note: You might also consider ways to simplify your HTML and/or CSS. You have 1.1MB loading without any real images; for mobile users, bandwidth is a real cost. I know that can be a PITA but worth mentioning. Good luck!
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.
I am developping a swipe gallery for mobile devices. Users can change images by sliding the screen, as any normal images gallery in most iPhone app.
Here is a demo:
http://daviddarx.com/stuffs/work/custom/swip/
To debug the iOS orientation bug (which let the content zoomed when you change the orientation), I used the only library that correct that:
http://scottjehl.github.com/iOS-Orientationchange-Fix/
Unfortunately, this library is working perfectly most of the time, but it happens to fail and not work correctly. This happen around 1 time on 10 times, and the result is then the same as if the library wasn't here.
This is not a huge problem on most of the mobile and responsive website, as the user can manually dezoom and then get back to the normal display.
But the problem here is that I had to disable the zoom function, to make my system work correctly. So, when the bug happen, once on 10 times, the gallery is then just bugged and stay like that....
So, here are my questions:
-do you know any other library that manage that bug fix, and is 100% completely reliable?
-if not, do you know a way to correct the used library to get a 100% support rate?
-if not, do you have any idea or solution for me?
Thank you in advance for your help!
David
There's an outstanding pull request on Scott Jehl's repo that uses slope detection instead of absolute values which seems to not suffer from the intermittent-ness of the original solution.
https://github.com/PeterWooster/iOS-Orientationchange-Fix/
I am working with some developers who are creating an iOS 5 iPad app for us. I am familiar with coding but my no means an expert. The developers have hit a wall in their code and so I am turning to you guys to check, that there really isn't anything left to try to resolve this problem, before we give up. I've looked around and can't seem to find a straight forward resolution anywhere else, so here's the question to you guys:
The App always has to have four UIWebViews loaded. The UIWebViews need to be able to contain any website out there, be it YouTube, or whatever you can think of (i.e. something like tabbed browsing). We've tried having them on screen and off screen but either way we always run into memory problems.
I know looking to Safari isn't helpful as it's created by the mothership directly, but we're only talking about four UIWebViews here, surely this shouldn't be such a problem? Any ideas...?
Many thanks,
M
There is only one true solution: Create your own equivalent to UIWebView that has only the features that you need, and therefore has a much smaller footprint than Apple's class. I've written such a thing, but it is not public, sorry.