Css3 Property Webkit-Overflow-Scrolling:Touch Error

CSS3 property webkit-overflow-scrolling:touch ERROR

As @relluf pointed out, applying 3D transitions on the relative element fixes the bug. However, I investigated it a bit further and it seems that applying -webkit-transform: translateZ(0px) works too (this is what Google does on gmaps map container) and it does not need to be on the relatively positioned element, just the direct descendant of the scrollable element.

So if you don't want to manually keep a list of all the places where the fix is needed, you just might do:

element {
    -webkit-overflow-scrolling: touch;
}

element > * {
    -webkit-transform: translateZ(0px);
}

-webkit-overflow-scrolling: touch; invalid property value

It's not supported by any browser. See at the bottom of this .link

Mobile web: -webkit-overflow-scrolling: touch conflicts with position:fixed

After two days struggling, I found this post saves me: 100% screen height css.

I have to limit the height of my content area to be the same height of the screen. Please find the working demo here: http://jsbin.com/tubaqaqumi/3/ (visit from a real phone; a Chrome simulator doesn't tell the difference).

Webkit Overflow Scrolling causing div's not to show?

Currently .post CSS class uses position: relative. If you remove that line, the issue goes away. Apparently relatively position elements are hidden when not within the view. Not exactly sure the why the iPad does this or if it is a bug. In my experience, iPad devices try to run as efficiently as possible. For example, if you scroll JS animations are frozen. Perhaps this is a technique to make iPads render pages more efficiently. Hopefully that helps.

This article maybe be related and have a work around: CSS3 property webkit-overflow-scrolling:touch ERROR

Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging

---

Related Topics