Incorrect matrix3d rendering




2 years ago
2 years ago


(Reporter: antmarot, Unassigned, NeedInfo)


53 Branch

Firefox Tracking Flags

(Not tracked)



(3 attachments)



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>
<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;

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


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]


2 years ago
Component: Untriaged → Layout
Product: Firefox → Core

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.