Incorrect matrix3d rendering

UNCONFIRMED
Unassigned

Status

()

UNCONFIRMED
a year ago
a year ago

People

(Reporter: antmarot, Unassigned, NeedInfo)

Tracking

53 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

a year ago
Created attachment 8870338 [details]
Difference between incorrect rendering and correct debug overlay

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

Steps to reproduce:

I have found an issue with matrix3d and incorrect transforms composition. It seems like it only happens when there are nested matrix3d transforms.

Here is a code to reproduce. Please see the attached screenshot as well.


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	body {
		transform-style: preserve-3d;		
	}

	#parent {
		transform: matrix3d(2.79999999999999982236,0.00000000000000000000,0,0.00000000000000000000,0.00000000000000000000,2.79999999999999982236,0,0.00000000000000000000,0,0,1,0,-8362.50000000000000000000,-6124.39999999999963620212,0,1.00000000000000000000);
		transform-origin: top left;
	}

	#nested {
		background-color: blue;
		transform: matrix3d(0.01830802407516572347,-0.00119969458285561995,0,-0.00000075044267238981,-0.00296886852264407423,0.01875395435161321747,0,-0.00000085177153094411,0,0,1,0,3088.65340166154646794894,2199.65869870111419004388,0,0.99280687565940461958);
		width: 4608px;
		height: 3456px;
		transform-origin: top left;
	}
</style>
</head>
<body>

<div id="parent">
	<div id="nested"></div>
</div>

</body>
</html>


Actual results:

The (blue) div is not rendered as it should be. The (composed) matrix transform applied to it is not correct. What is strange is that the overlay given through the development tools is actually correct (see screenshot).

Comment 1

a year ago
Created attachment 8870393 [details]
1366985.html

Updated

a year ago
Component: Untriaged → Layout
Product: Firefox → Core
(Reporter)

Comment 2

a year ago
Created attachment 8870398 [details]
Browsers comparison

Here is how it correctly renders in Chrome and Safari vs. Firefox.

Comment 3

a year ago
I tested with an old version of Firefox (33) and the same rendering is present too.

Comment 4

a year ago
hiro, I think it's in your code area. If not, could you NI someone else, please.
Flags: needinfo?(hikezoe)
Thank you, Loic.  Unfortunately this is not in my area.  I am an animation guy.  I guess this is a dup of preserve-3d bug.
ni? to Matt Woodrow.
Flags: needinfo?(hikezoe) → needinfo?(matt.woodrow)
You need to log in before you can comment on or make changes to this bug.