Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS perspective should only affect direct DOM children. #5278

Closed

Conversation

mattwoodrow
Copy link
Contributor

@mattwoodrow mattwoodrow commented Oct 12, 2022

1f51474

CSS perspective should only affect direct DOM children.
https://bugs.webkit.org/show_bug.cgi?id=73268
<rdar://problem/100834757>

Reviewed by NOBODY (OOPS!).

CSS perspective should only be combined into the transform of direct DOM children, and shouldn't result in any intersections in 3d coordinate space.

We currently create a GraphicsLayer for the RenderLayer with perspective, which applies the perspective to all RenderLayer children (even if they belong
to a descendant that isn't a child), and enables intersections.
This change instead creates a wrapper GraphicsLayer for each transformed RenderLayer which should inherit perspective from its parent. This ensures that
we only apply perspective when correct, and no intersections can happens since the perspective wrapper only has a single child.
The downside is that we create extra GraphicsLayers, but there's no other way to get the desired CSS behaviour with the current API.

The perspective layer is sized the same as the parent layer, since the computed perspective transform gets applied relative to the anchor point of the
layer, and it's expected to be in the middle of the layer, so we need them to be the same size.

* LayoutTests/TestExpectations:
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/3d-rendering-context-behavior-expected.txt:
* Source/WebCore/rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::destroyGraphicsLayers):
(WebCore::RenderLayerBacking::updateChildrenTransformAndAnchorPoint):
(WebCore::RenderLayerBacking::updateConfiguration):
(WebCore::RenderLayerBacking::updateInternalHierarchy):
(WebCore::RenderLayerBacking::updatePerspectiveLayer):
(WebCore::RenderLayerBacking::childForSuperlayers const):
* Source/WebCore/rendering/RenderLayerBacking.h:
* Source/WebCore/rendering/RenderLayerCompositor.cpp:
(WebCore::recompositeChangeRequiresGeometryUpdate):
(WebCore::recompositeChangeRequiresChildrenGeometryUpdate):
(WebCore::RenderLayerCompositor::layerStyleChanged):
* Source/WebCore/rendering/RenderObject.cpp:
(WebCore::RenderObject::getTransformFromContainer const):

1f51474

Misc iOS, tvOS & watchOS macOS Linux Windows
βœ… πŸ§ͺ style βœ… πŸ›  ios βœ… πŸ›  mac βœ… πŸ›  wpe βœ… πŸ›  πŸ§ͺ win
βœ… πŸ§ͺ bindings βœ… πŸ›  ios-sim βœ… πŸ›  mac-debug βœ… πŸ›  gtk βœ… πŸ›  wincairo
βœ… πŸ§ͺ webkitperl ❌ πŸ§ͺ ios-wk2 βœ… πŸ›  mac-AS-debug ❌ πŸ§ͺ gtk-wk2
βœ… πŸ§ͺ api-ios βœ… πŸ§ͺ api-mac ❌ πŸ§ͺ api-gtk
βœ… πŸ›  tv ❌ πŸ§ͺ mac-wk1
βœ… πŸ›  tv-sim ❌ πŸ§ͺ mac-wk2
βœ… πŸ›  watch ❌ πŸ§ͺ mac-AS-debug-wk2
βœ… πŸ›  watch-sim βœ… πŸ§ͺ mac-wk2-stress

@mattwoodrow mattwoodrow self-assigned this Oct 12, 2022
@mattwoodrow mattwoodrow added 528+ (Nightly build) CSS Cascading Style Sheets implementation labels Oct 12, 2022
bool layerChanged = false;
if (needsPerspectiveLayer) {
if (!m_perspectiveLayer) {
String layerName = m_owningLayer.name() + " (perspective)";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should use makeString(m_owningLayer.name(), " (perspective)")

@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Oct 12, 2022
https://bugs.webkit.org/show_bug.cgi?id=73268
<rdar://problem/100834757>

Reviewed by NOBODY (OOPS!).

CSS perspective should only be combined into the transform of direct DOM children, and shouldn't result in any intersections in 3d coordinate space.

We currently create a GraphicsLayer for the RenderLayer with perspective, which applies the perspective to all RenderLayer children (even if they belong
to a descendant that isn't a child), and enables intersections.
This change instead creates a wrapper GraphicsLayer for each transformed RenderLayer which should inherit perspective from its parent. This ensures that
we only apply perspective when correct, and no intersections can happens since the perspective wrapper only has a single child.
The downside is that we create extra GraphicsLayers, but there's no other way to get the desired CSS behaviour with the current API.

The perspective layer is sized the same as the parent layer, since the computed perspective transform gets applied relative to the anchor point of the
layer, and it's expected to be in the middle of the layer, so we need them to be the same size.

* LayoutTests/TestExpectations:
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/3d-rendering-context-behavior-expected.txt:
* Source/WebCore/rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::destroyGraphicsLayers):
(WebCore::RenderLayerBacking::updateChildrenTransformAndAnchorPoint):
(WebCore::RenderLayerBacking::updateConfiguration):
(WebCore::RenderLayerBacking::updateInternalHierarchy):
(WebCore::RenderLayerBacking::updatePerspectiveLayer):
(WebCore::RenderLayerBacking::childForSuperlayers const):
* Source/WebCore/rendering/RenderLayerBacking.h:
* Source/WebCore/rendering/RenderLayerCompositor.cpp:
(WebCore::recompositeChangeRequiresGeometryUpdate):
(WebCore::recompositeChangeRequiresChildrenGeometryUpdate):
(WebCore::RenderLayerCompositor::layerStyleChanged):
* Source/WebCore/rendering/RenderObject.cpp:
(WebCore::RenderObject::getTransformFromContainer const):
@mattwoodrow mattwoodrow removed the merging-blocked Applied to prevent a change from being merged label Oct 12, 2022
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Oct 12, 2022
@smfr
Copy link
Contributor

smfr commented Oct 12, 2022

I couple of thoughts before I do a full review.

  1. perspective can be animated; do we map this to a hardware animation now? With your patch, do we correctly animate perspective on all the right layers?
  2. There's a parallax scrolling thing where perspective on an overflow:scroll affects the transform on scrolled, transformed layers, and this needs to continue to work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Cascading Style Sheets implementation merging-blocked Applied to prevent a change from being merged
Projects
None yet
5 participants