iPad Safari scrolling causes HTML elements to disa

2019-01-02 22:00发布

I'm currently developing a web app using html5 and jQuery for iPad Safari. I'm running into a problem wherein large scroll areas cause the elements that are offscreen to appear after a delay when I scroll down to them.

What I mean by that is, if I have a row of images (or even a div with a gradient) that is offscreen, when I scroll down (or up) to it, the expected behavior is for the element to appear on screen as I am scrolling to it.

However, what I'm seeing is that the element does not appear until I lift my finger off the screen and the scroller finishes all its animations.

This is causing a super noticeable problem for me, making the whole thing look choppy, although it is not. I'm guessing the iPad Safari is trying to do something to save memory. Is there any way in which I can prevent this choppy-ness from happening. Additionally, I would also appreciate if anyone can shed light on what the iPad Safari is actually trying to do.

11条回答
等我变得足够好
2楼-- · 2019-01-02 22:08

I had the same issue with iscroll 4.2.5 on ios7. The whole scroll element just disappear. I've tried to add translate3d(0,0,0) as was suggested here, it have solved the problem, but it disabled the iscroll "snap" effect. The solution came with giving "position:relative; z-index:1000;display:block" css properties to the whole container that holds the scroll element and there is no need to give translate3d to child elements.

查看更多
趁早两清
3楼-- · 2019-01-02 22:10

I'm pretty darn sure I just solved this with:

overflow-y: auto;

(Presumably just overflow: auto; would work too depending on your needs.)

查看更多
Rolldiameter
4楼-- · 2019-01-02 22:13

This is a very common problem faced by developers and that is mainly due to Safari's property of not recreating elements defined as position : fixed.

So either change the position property or some hack needs to be applied as mentioned in other answers.

Link1

Link2

查看更多
5楼-- · 2019-01-02 22:14

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. So here's the complete answer that solved my problem:

@Colin Williams, thank you! Your answer and the article you linked out to gave me a lead to try something with CSS.

So, 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 app, 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.

So, thanks again, and hope this helps some other lost soul. This surely helped me big time!

查看更多
甜甜的少女心
6楼-- · 2019-01-02 22:14

Targeting all elements but html : *:not(html) caused problems on other elements in my case. It modified the stacking context, causing some z-index to break.

We should better try to target the right element and apply -webkit-transform: translate3d(0,0,0) to it only.

查看更多
一夜七次
7楼-- · 2019-01-02 22:18

You need to trick the browser to use hardware acceleration more effectively. You can do this with an empty 3d transform:

-webkit-transform: translate3d(0,0,0)

Particularly, you'll need this on child elements that have a position:relative; declaration (or, just go all out and do it to all child elements).

Not a guaranteed fix, but fairly successful most of the time.

Hat tip: https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

查看更多
登录 后发表回答