iPad Safari scrolling causes HTML elements to disappear and reappear with a delay
I was using translate3d before. It produced unwanted results. Basically, it would chop off and not render elements that were offscreen, until I interacted with them. So, basically, in landscape orientation, half of my site that was offscreen was not being shown. This is a iPad web application, owing to which I was in a fix.
Applying translate3d to relatively positioned elements solved the problem for those elements, but other elements stopped rendering, once offscreen. The elements that I couldn't interact with (artwork) would never render again, unless I reloaded the page.
The complete solution:
*:not(html) {
-webkit-transform: translate3d(0, 0, 0);
}
Now, although this might not be the most "efficient" solution, it was the only one that works. Mobile Safari does not render the elements that are offscreen, or sometimes renders erratically, when using -webkit-overflow-scrolling: touch
. Unless a translate3d is applied to all other elements that might go offscreen owing to that scroll, those elements will be chopped off after scrolling.
(This is the complete answer to my question. I had originally marked Colin Williams' answer as the correct answer, as it helped me get to the complete solution. A community member, @Slipp D. Thompson edited my question, after about 2.5 years of me having asked it, and told me I was abusing SO's Q & A format. He also told me to separately post this as the answer.
@Colin Williams, thank you! The answer and the article you linked out to gave me a lead to try something with CSS. So, thanks again, and hope this helps some other lost soul. This surely helped me big time!)
iPad Safari elements disappear and reappear with a delay
Transforms create a new stacking order and context. That means that fixed
positioning will no longer be tied to the viewport.
In this particular case, the simple answer is that you can't combine transforms and fixed
positioning.
Scrolling really quickly on Firefox, iPad, and Safari causes elements to disappear then reappear
Element appearing to blank during scroll
This is because sometimes the browsers can't render fast enough to keep up with the scroll. Rather than cause a janky scroll, they just stop rending anything until they can catch up. This is particularly likely to happen on mobile where you scroll really fast with just a flick of the finger, but resources are pretty low.
Navbar scroll event delayed
This depends on the browser, but again they are trying to ensure a fast scroll experience. One of the things they might do is refuse to do expensive onscroll
events until after the scroll is mostly over. I also believe that refusing to do onscroll
events allows them to do cool hardware acceleration that is beyond my ability to answer.
This html5rocks article is an interesting starting point for reading about how browsers do hardware acceleration.
iPad Safari improper scrolling in RTL with wide content
This is a bug within WebKit and has been resolved by https://bugs.webkit.org/show_bug.cgi?id=146872.
See the change log here:
https://bugs.webkit.org/attachment.cgi?id=256657&action=review
I don't know the release version though.
Consider most iOS has browser updates with the OS update, this would patched soon (fixed as 2015-7-11).
Related Topics
Split Div into 2 Columns Using CSS
How to Make a Div Expand Vertically to Wrap the Content Within It
Is There a CSS Parent Selector
How to Make Twitter Bootstrap Menu Dropdown on Hover Rather Than Click
Css Force Image Resize and Keep Aspect Ratio
How to Write a ':Hover' Condition For 'A:Before' and 'A:After'
Remove Blue Underline from Link
Css Attribute Selectors: the Rules on Quotes (", ' or None)
How Would You Make Two <Div>S Overlap
Override Body Style for Content in an Iframe
Css Customized Scroll Bar in Div
Is There a "Previous Sibling" Selector
How to Center Floated Elements
Flex-Box: Align Last Row to Grid