Try visiting https://output.jsbin.com/muqaqejafi Clicking the button toggles -webkit-overflow-scrolling : touch/auto. When touch is selected, perspective from the scroller is not applied to the background as per my understanding of the TR transform spec and parallax fails. This appears to be the source of some pain in the wild (https://css-tricks.com/forums/topic/parallax-scrolling-that-actually-works-on-ipad/). I'm not aware of a way to get both fling and parallax on an overflow scroller on iOS without resorting to JS (is there a way?). Unrelated: it is difficult to click the button on iOS without being scrolled to the top. Could the scrolled content be interfering with hit testing, despite the scroll clip?
<rdar://problem/25642222>
Related: https://bugs.webkit.org/show_bug.cgi?id=164949
*** Bug 164949 has been marked as a duplicate of this bug. ***
*** Bug 211851 has been marked as a duplicate of this bug. ***
Created attachment 399281 [details] Patch
Comment on attachment 399281 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=399281&action=review > Source/WebCore/rendering/RenderLayerBacking.cpp:691 > + auto layerForChildrenTransform = [&]() { Unnecessary () > Source/WebCore/rendering/RenderLayerBacking.cpp:706 > + perspectiveRelativeBox = borderBoxRect; > + return m_graphicsLayer.get(); > + }; > + > + auto* layerForPerspective = layerForChildrenTransform(); If you wanted to be fancy you could return both perspectiveRelativeBox and layer together with something like return std::make_tuple(m_graphicsLayer.get(), borderBoxRect); } auto [layerForPerspective, perspectiveRelativeBox] = layerForChildrenTransform()
https://trac.webkit.org/changeset/261632/webkit