Bug 156435 – composited scrolling interferes with the propagation of perspective

• Component: Compositing
• Status: RESOLVED FIXED

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?

[Radar WebKit Bug Importer]

<rdar://problem/25642222>

[Jayden Seric]

Related: https://bugs.webkit.org/show_bug.cgi?id=164949

[Simon Fraser (smfr)]

*** Bug 164949 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

*** Bug 211851 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

Created attachment 399281 [details]
Patch

[Antti Koivisto]

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()

[Simon Fraser (smfr)]

https://trac.webkit.org/changeset/261632/webkit