iOS5 Safari: position: relative elements disappear during scroll when using -webkit-overflow-scrolling: touch

[scottjehl]

Summary:

In iOS5 Safari: position: relative (or possibly all positioned) child elements occasionally disappear while scrolling an element that uses -webkit-overflow-scrolling: touch. They seem to consistently reappear after scroll stops. This seems to occur most with elements that are outside of the overflow region at scroll start.

Platforms:

• iOS5

  How to reproduce:

  1. Set overflow: auto and -webkit-overflow-scrolling: touch on an element that has position: relative child elements and a lot of content
  2. Open in iOS5 and scroll the element

     Reduced Example:

http://jsbin.com/izimaf/3/

Bug Tracker ticket(s):

Workarounds:

[kpdecker]

We ran into this one as well. This (stylus) seemed to fix the issue for all of the instances we had:

.carousel
  overflow-scrolling touch

  > .collection
    fix-touch-scrolling()

fix-touch-scrolling()
  // This is required to work around a bug that occurs when maps is hit on iOS devices.
  // If this is not applied the contents of the the touch overflow scrolling section the
  // content will be clipped on scroll
  //
  // http://stackoverflow.com/questions/7808110/css3-property-webkit-overflow-scrollingtouch-error
  // http://stackoverflow.com/a/7893031/238459
  transform translate3d(0, 0, 0)

[tbassetto]

Just ran into this bug. Setting -webkit-transform: translate3d(0, 0, 0); to all the children of the element that has -webkit-overflow-scrolling: touch; fixed it.

[bnickel]

Do not try applying the transform to the scrollable element itself as a time saver. I've seen this trigger a device defect where the part of the screen that had the element stops responding to touches even after page nav.

[D3N-AMAN]

Ran to this bug on iOS 11.2 (iPhone 6, xCode's simulator). Checked it on iOS 9.3 - everything works correctly. Does anyone have a solution to this problem ?

[D3N-AMAN]

I found a solution. It's stupid, but it works ! Adding animated gif (1px X 1px) on page fix this problem.

[vkozinec]

@Amansky Hey, can you please elaborate a bit more what you did? I assume animated gif triggers gpu more and thus divs do not disappear. I am running into similar issue right now and banging my head on wall for more than 3 days. Did you add 1x1 gif to div that has overflow touch or in root ( body ) ?

[D3N-AMAN]

@vkozinec I added 1x1 gif not in root, but to a static part of page. HTML code looks like this: <div> //static container <img src="...../1x1.gif" width="1px" height="1px"> <div></div> //this container has overflow property </div>

[vkozinec]

@Amansky Thank you. I tested for example with 1 second animated gif and content really appeared every 1 second while coming from offscreen, it's obviously related to screen update/refresh from that gif, so i put .1s animation and it works.

Btw. while researching this problem a bit more, I stumble upon some other things. This bug could be related to using UIWebView in iOS. Changing to WKWebView could resolve this issue, still didn't test it, but I saw it fixes issue where momentum scrolling stops JS until scroll stops. I will test this put results here so at least other people can fix their problems faster

[PocketNinjaDesign]

I had the same issue while working on my site. I dynamically generate an overlay which contains scrollable content, all with JS. So I had a class on the overlay template

.tool-device-touch {
  @media (max-width: $bpSmall) {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
  }
}

The strange thing was the scroll wouldn't work, then if I closed the overlay with JS which deleted it. You then activate the overlay the same way by clicking a gallery item. The overlay pops up and the scroll works. Though it's recreated it and generated it from scratch again.

So I messed around a bit and found this gory HACK if you're doing everything with JS:

1. Remove the overflow scrolling class from the JS template
2. After the content has rendered with JS onto the page apply a script that adds the class in a timeout

setTimeout(() => {
  this.$portfolioDetail.addClass('tool-device-touch');
}, 500);

I tried 10 and 100 and it didn't work, but it seems to work at 500 and I got bored trying to find out how low I could go. It also may depend on the browser and mobile with the rendering as well.

[aprilmintacpineda]

I have experienced this but not only on elements with position relative. My contents are dynamic and I am using a inferno-js on the frontend.

The site I'm developing doesn't scroll smoothly on ios. This is because my contents has a wrapper and the wrapper is set to height: 100vh and overflow: scroll. I found out that ios hates it and will only make your site scrollable IF you OVERFLOW THE BODY instead. That means removing height: 100vh on my wrapper and moving overflow: scroll to the body element. Even by then, some containers that's meant to overflow, like a navigation bar for example, doesn't scroll pretty well, the scrolling is generally shitty but on android and safari desktop there's absolutely no problem.

'Till I came across the -webkit-overflow-scrolling: touch thing, which made the scrolling smooth, but also introduced this issue. At first glance everything looks good. Until you scroll all the way down to the bottom AND wait a few seconds. Then boom, SOME of the elements would disappear.

Thanks to @tbassetto's comment. That solved the problem for me. In my case, I applied -webkit-overflow-scrolling: touch on the body and html elements, I think their children would inherit that. Next, I put the transform: translate3d(0, 0, 0) hack on the * selector BUT only for ios using:

@supports (-webkit-overflow-scrolling: touch) {
  transform: translate3d(0, 0, 0);
}

Seriously, what's the deal with this. Why do they have to make us use their dirty hacks just to make our sites scrollable.

Now the problem I have is when I show a modal overlay that has the following specs:

• The modal wrapper is vertically scrollable.
• The modal content overlay is both horizontally and vertically scrollable.

When I scroll. The body scrolls. Like seriously, that modal has a higher z-index than the content below it. I expect that to block scroll events on the content below it.

[kavibhavsar]

@aprilmintacpineda i am running with same issue

[tommedema]

html, body {
   -webkit-overflow-scrolling: touch;
}

resolved this for me, without having to set transform: translate