Incorrect matrix3d rendering

UNCONFIRMED
Unassigned

Status

()

UNCONFIRMED
2 years ago
2 years ago

People

(Reporter: antmarot, Unassigned, NeedInfo)

Tracking

53 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

2 years 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

2 years ago
Created attachment 8870393 [details]
1366985.html

Updated

2 years ago
Component: Untriaged → Layout
Product: Firefox → Core
(Reporter)

Comment 2

2 years ago
Created attachment 8870398 [details]
Browsers comparison

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

Comment 3

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

Comment 4

2 years 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.