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

Issue metadata

Status: Fixed
Closed: Dec 2016
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

Sign in to add a comment

Issue 242685: CSS matrix3d transform inconsistent under full page zoom

Reported by, May 21 2013 Project Member

Issue description

Version: 26.0.1410.65
OS: OSX 10.8.3

What steps will reproduce the problem?
1. Open csszoombug.html
2. Notice that the blue shape touches the edges of the red square
3. Now zoom out a few times (apple minus)

What is the expected output? What do you see instead?

I would expect that the page zooms together, instead the elements shift from each other.
505 bytes View Download

Comment 1 by, May 22 2013

Labels: Cr-Blink-CSS-3D

Comment 2 by, May 22 2013

Thanks for reporting.  I tried to bisect without meaningful results.  This also reproduces on Safari, so the bug is somewhere in Blink/WebKit.

I suspect it's a bug with how composited-layer positions are computed in RenderLayerBacking.

Comment 3 by, Mar 18 2014

Some more information; it seems the bug is isolated to only transforms using matrices. When decomposed, the individual transforms are resilient to page zooms.

See attached file with a similar transform but decomposed.
450 bytes View Download

Comment 4 by, Apr 14 2014

Here is another demonstration of this problem:

The cyan grid is transformed manually by multiplying the matrix in JavaScript, while the underlying magenta grid is transformed using a CSS matrix3d transform. Normally the cyan grid exactly overlays the magenta grid. However, they become detached when the page is zoomed.

FWIW, the same bug affects Firefox: (Firefox is also affected on Retina displays, but Chrome is not.)

Comment 5 by, Apr 1 2015

Any update on this?
Here's another (admittedly experimental) website that suffers from this issue:

Observe how the 3D labels are rendered out of alignment when the browser zoom level is changed by the user.

Comment 6 by, Apr 2 2015


Comment 7 by, Apr 2 2015

Labels: Hotlist-GoodFirstBug
I wonder if the problem is that Blink is applying the matrix in post-page scale space, and so elements that have a transform with any sort of perspective start behaving non-linearly.  As page zoom isn't really observable from Javascript in the sense that widths don't change, I think this is a bug.  Probably the page zoom needs to be included somewhere before/after the the transform to make this correct.

This is quite unfortunate, but it isn't really a high priority bug.

Comment 8 by, Nov 7 2015

Another - short example:

The Issue does not apply to Firefox and Edge.
897 bytes View Download
10.2 KB View Download

Comment 9 by, Dec 14 2015

Labels: Hotlist-Polish

Comment 10 by, Nov 6 2016

Submitted a fix for this in

Comment 11 by, Nov 10 2016

 Issue 661955  has been merged into this issue.

Comment 12 by, Nov 10 2016

Project Member
The following revision refers to this bug:

commit 6be6a794e7ea4dcc2b9e12da2aa02d00b3c84f1c
Author: fta2012 <>
Date: Thu Nov 10 08:13:58 2016

Fix matrix3d transform under page zoom

The math for adjusting a matrix3d transform when the page is zoomed is incorrect in at least 3 different places.

There was a previous attempt at fixing this but they did it the same way as the 2d matrix case and forgot about the translateZ component (ceddaab902432728b12a17fcbf2c42283c7dfe68). But it would've been incorrect even if they did take translateZ into account.

The real problem is that the last column can't be interpeted as the translation at all if the matrix is non-affine!

To get the general correction for matrix3d, intuitively, we want to first scale down to the original units, do the transform, then scale back up. So checking with octave/matlab it should actually be:

    octave:1> pkg load symbolic;
    octave:2> A = sym('a', [3, 3]); B = sym('b', [3, 1]); C = sym('c', [1, 3]); D = sym('d', [1, 1]); s = sym('s');
    octave:3> M = [A, B; C D]
    M = (sym 4×4 matrix)

      ⎡a₁₁  a₁₂  a₁₃  b₁₁⎤
      ⎢                  ⎥
      ⎢a₂₁  a₂₂  a₂₃  b₂₁⎥
      ⎢                  ⎥
      ⎢a₃₁  a₃₂  a₃₃  b₃₁⎥
      ⎢                  ⎥
      ⎣c₁₁  c₁₂  c₁₃  d₁₁⎦

    octave:4> scaleDown = [[eye(3) / s, zeros(3, 1)]; [zeros(1, 3), 1]]
    scaleDown = (sym 4×4 matrix)

      ⎡1         ⎤
      ⎢─  0  0  0⎥
      ⎢s         ⎥
      ⎢          ⎥
      ⎢   1      ⎥
      ⎢0  ─  0  0⎥
      ⎢   s      ⎥
      ⎢          ⎥
      ⎢      1   ⎥
      ⎢0  0  ─  0⎥
      ⎢      s   ⎥
      ⎢          ⎥
      ⎣0  0  0  1⎦

    octave:5> scaleUp = [[s * eye(3), zeros(3, 1)]; [zeros(1, 3), 1]]
    scaleUp = (sym 4×4 matrix)

      ⎡s  0  0  0⎤
      ⎢          ⎥
      ⎢0  s  0  0⎥
      ⎢          ⎥
      ⎢0  0  s  0⎥
      ⎢          ⎥
      ⎣0  0  0  1⎦

    octave:6> scaleUp * M * scaleDown
    ans = (sym 4×4 matrix)

      ⎡a₁₁  a₁₂  a₁₃  b₁₁⋅s⎤
      ⎢                    ⎥
      ⎢a₂₁  a₂₂  a₂₃  b₂₁⋅s⎥
      ⎢                    ⎥
      ⎢a₃₁  a₃₂  a₃₃  b₃₁⋅s⎥
      ⎢                    ⎥
      ⎢c₁₁  c₁₂  c₁₃       ⎥
      ⎢───  ───  ───   d₁₁ ⎥
      ⎣ s    s    s        ⎦

So in the above matrix, if it is affine (which is exactly when the `c` entries are 0 and `d` is 1) you can get away with just scaling the last column interpreting `b` as the translation.

But for a general matrix3d you still need a few more divides on the bottom row!

Sidenote: The perspective transform is the only other CSS transform that is non-affine and it gets the zoom division implicitly when the parameter is scaled up since it's in the form of:

  ⎡1  0   0   0⎤
  ⎢            ⎥
  ⎢0  1   0   0⎥
  ⎢            ⎥
  ⎢0  0   1   0⎥
  ⎢            ⎥
  ⎢      -1    ⎥
  ⎢0  0  ───  1⎥
  ⎣       p    ⎦

The reported issue is solved by fixing TransformBuilder as described above. But the same type of bug also appeared in getComputedStyle and animations with matrix3d. I also fixed them in this CL but a longer term solution should probably refactor all them (maybe into TransformOperation::zoom) so that this tricky bit of logic isn't duplicated in so many places.

BUG= 242685 

Cr-Commit-Position: refs/heads/master@{#431208}


Comment 13 by, Nov 23 2016

So any update on the fix and when will it be available? :)

Comment 14 by, Nov 23 2016

The above change looks to me like it is on branch 56, but not 55.

So depending on what channel you're asking about, that sets the time frame.

I'm not dialed right into when the releases hit where right now, but I think stable is 54, so dev should be 56 and already have it.  Check your channel and version.  The release cycle is about six weeks, and is slowed down over the year-end.

I haven't verified that the change fixes all the problems yet.

Comment 15 by, Dec 5 2016

Status: Fixed (was: Available)
This looks like it is fixed in M 56 to me.

Leaving to reporter or test to move to verified.

Comment 16 by, Jan 3 2017

Labels: M-56

Comment 17 by, Jan 3 2017

 Issue 668753  has been merged into this issue.

Comment 18 by, Mar 24 2017

Components: -Blink>CSS>CSS3D Blink>Compositing>Transform3D

Sign in to add a comment