New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 714001 link

Starred by 3 users

Issue metadata

Status: Fixed
Owner:
Last visit > 30 days ago
Closed: Apr 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac
Pri: 1
Type: Bug-Regression



Sign in to add a comment

CSS - 3D-Transformation and perspective / perspective-origin

Reported by timmytom...@gmail.com, Apr 21 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36

Example URL:
https://timmytommy.github.io/HTML-Yahtzee/

Steps to reproduce the problem:
1. Open URL in Chromium 57 => Dices in 3D (perspective)
2. Open URL in Chromium 58 => Dices in 2.5D (no perspective)
3. Open URL in Firefox 51 => Dices in 3D (perspective)

What is the expected behavior?
Display the dice in perspective view

What went wrong?
The CSS properties "perspective" or "perspective-origin" do not work properly in Chromium 58.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? Yes Chromium 57

Does this work in other browsers? Yes

Chrome version: 58.0.3029.81  Channel: stable
OS Version: 10.0
Flash Version: 

Yesterday in Chrome 57 my little Yahtzee Game worked properly and the dice were in 3D and in perspective view.
Today after the update they are still in 3D when animated, but they look 2D when lying still.
 
In Chrome 58.png
108 KB View Download
In Firefox.png
130 KB View Download
Components: Blink>Compositing>Transform3D
Labels: -Pri-2 Needs-Bisect Prestable-58.0.3029.81 Pri-1
Labels: BugSource-User PaintTeamTriaged-20170421
Status: Untriaged (was: Unconfirmed)
Confirmed. Waiting on bisect.
Labels: -Type-Compat -Needs-Bisect OS-Android OS-Chrome OS-Linux OS-Mac Type-Bug-Regression
Owner: ajuma@chromium.org
Status: Assigned (was: Untriaged)
Bisects to
https://chromium.googlesource.com/chromium/src/+log/57fd39f44a3af5474f75cca7bd9870d4e26fc6d2..d290cbee660c449245346abe4a9f2c7948df4c9e

Specifically, https://chromium.googlesource.com/chromium/src/+/d290cbee660c449245346abe4a9f2c7948df4c9e

I don't think that the static/animating behaviro change is the issue. I think that the perspective transform changed such that the static case now has us looking directly onto the front face of the die. The previous behavior, which matches Firefox now, is to have larger die with a very obvious non-centered projection.

Marking as P1 regression until we know whether the new behavior is right, and until we can reduce the test case to understand the underlying importance of the issue.

Comment 4 by ajuma@chromium.org, Apr 21 2017

Cc: flackr@chromium.org trchen@chromium.org
Owner: chrishtr@chromium.org
Passing on to Chris to find an owner for investigating the spec questions raised in #3.
Reverting https://chromium.googlesource.com/chromium/src/+/d290cbee660c449245346abe4a9f2c7948df4c9e doesn't make any difference to the behavior on ToT. Maybe the bisect is wrong or maybe something else changed in conjunction with it.

Comment 6 by trchen@chromium.org, Apr 22 2017

Cc: ajuma@chromium.org
This demo doesn't seem to hit any known spec bug. I think the right behavior is to match M57 & Firefox.

The simplified page looks like this:
<div style="perspective:60em">
  <div>
  .... deep nested div, no fix-pos container or grouping stuff
    <div>
      <div style="position:fixed; transform-style:preserve-3d;">
        <div style="transform:...">face of the dice</div>
        <div style="transform:...">face of the dice</div>
        <div style="transform:...">face of the dice</div>
      </div>
    </div>
  </div>
</div>

It does look like having something to do with r449448, though I don't know exactly how. :/

Comment 7 by trchen@chromium.org, Apr 22 2017

Cc: -trchen@chromium.org chrishtr@chromium.org
Owner: trchen@chromium.org
Ah, there's the change in cc/layers/layer.cc

 bool Layer::IsContainerForFixedPositionLayers() const {
-  if (!inputs_.transform.IsIdentityOrTranslation())
-    return true;
-  if (parent_ && !parent_->inputs_.transform.IsIdentityOrTranslation())
-    return true;
   return inputs_.is_container_for_fixed_position_layers;
 }

Thus the perspective layer (CLM::m_childTransformLayer) is no longer considered fixed-pos container automatically.

Just verified locally the following patch fixes the bug:

diff --git a/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMapping.cpp b/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMapping.cpp
index 445b2ad8364f..a2cd3b82e32c 100644
--- a/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMapping.cpp
+++ b/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMapping.cpp
@@ -1613,7 +1613,7 @@ void CompositedLayerMapping::RegisterScrollingLayers() {
       owning_layer_.GetLayoutObject().CanContainFixedPositionObjects() &&
       !owning_layer_.IsRootLayer();
   scrolling_coordinator->SetLayerIsContainerForFixedPositionLayers(
-      graphics_layer_.get(), is_container);
+      child_transform_layer_ ? child_transform_layer_.get() : graphics_layer_.get(), is_container);
 }

 void CompositedLayerMapping::UpdateInternalHierarchy() {

Project Member

Comment 8 by bugdroid1@chromium.org, Apr 26 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/25eaaeb522126f998e9bd83056f96a5ce3cc78c2

commit 25eaaeb522126f998e9bd83056f96a5ce3cc78c2
Author: trchen <trchen@chromium.org>
Date: Wed Apr 26 00:17:10 2017

[blink] Perspective layer should be considered fixed-pos container layer

This CL fixes a bug that fixed-position descendants skip its containing
block's perspective transform. Perspective layer (CompositedLayerMapping::
child_transform_layer_) should be considered fixed-pos container if
present.

BUG= 714001 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2

Review-Url: https://codereview.chromium.org/2833233002
Cr-Commit-Position: refs/heads/master@{#467175}

[add] https://crrev.com/25eaaeb522126f998e9bd83056f96a5ce3cc78c2/third_party/WebKit/LayoutTests/transforms/perspective-fixed-pos-descendant-expected.html
[add] https://crrev.com/25eaaeb522126f998e9bd83056f96a5ce3cc78c2/third_party/WebKit/LayoutTests/transforms/perspective-fixed-pos-descendant.html
[modify] https://crrev.com/25eaaeb522126f998e9bd83056f96a5ce3cc78c2/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMapping.cpp

Comment 9 by trchen@chromium.org, Apr 27 2017

Labels: Merge-Request-58 Merge-Request-59
Should we bring this back to M58 & M59?
Project Member

Comment 10 by sheriffbot@chromium.org, Apr 27 2017

Labels: -Merge-Request-59 Hotlist-Merge-Approved Merge-Approved-59
Your change meets the bar and is auto-approved for M59. Please go ahead and merge the CL to branch 3071 manually. Please contact milestone owner if you have questions.
Owners: amineer@(Android), cmasso@(iOS), gkihumba@(ChromeOS), Abdul Syed@(Desktop)

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Project Member

Comment 11 by bugdroid1@chromium.org, Apr 28 2017

Labels: -merge-approved-59 merge-merged-3071
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/425fee0e59a4cbaa0ff67a9f2702a269bcd1ac18

commit 425fee0e59a4cbaa0ff67a9f2702a269bcd1ac18
Author: Tien-Ren Chen <trchen@chromium.org>
Date: Fri Apr 28 18:49:43 2017

[blink] Perspective layer should be considered fixed-pos container layer

This CL fixes a bug that fixed-position descendants skip its containing
block's perspective transform. Perspective layer (CompositedLayerMapping::
child_transform_layer_) should be considered fixed-pos container if
present.

BUG= 714001 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2

Review-Url: https://codereview.chromium.org/2833233002
Cr-Commit-Position: refs/heads/master@{#467175}
(cherry picked from commit 25eaaeb522126f998e9bd83056f96a5ce3cc78c2)

Review-Url: https://codereview.chromium.org/2846313002 .
Cr-Commit-Position: refs/branch-heads/3071@{#299}
Cr-Branched-From: a106f0abbf69dad349d4aaf4bcc4f5d376dd2377-refs/heads/master@{#464641}

[add] https://crrev.com/425fee0e59a4cbaa0ff67a9f2702a269bcd1ac18/third_party/WebKit/LayoutTests/transforms/perspective-fixed-pos-descendant-expected.html
[add] https://crrev.com/425fee0e59a4cbaa0ff67a9f2702a269bcd1ac18/third_party/WebKit/LayoutTests/transforms/perspective-fixed-pos-descendant.html
[modify] https://crrev.com/425fee0e59a4cbaa0ff67a9f2702a269bcd1ac18/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMapping.cpp

Labels: -Merge-Request-58
Status: Fixed (was: Assigned)
A bit late for M58. Only merged to M59 for now.
Labels: TE-Verified-M59 TE-Verified-59.0.3071.36
Verified this issue on Mac OS 10.12.4, Windows-10 and Ubuntu 14.04 using chrome latest beta M59-59.0.3071.36 by following steps mentioned in the original comment. Observed able to view the dice in perspective view as expected. Hence adding TE-Verified label.

Thanks! 
Screenshot from 2017-05-03 13:28:50.png
39.0 KB View Download
Thanks guys! Everything works well after the last update :) 

Sign in to add a comment