Rotation with perspective jumps in Firefox 32.0.1 - html

Question

I'm transforming a div with perspective(150px) and rotateY(-1deg) and on hover I'm transitioning the rotation to 0deg.
Everything worked great, on Firefox 31.0 for Windows, then I updated to Firefox 32.0.1.
Now in Firefox 32.0.1, the perspective and rotation work, but the transition between the normal state and the hover state has a nasty little jump that I can't seem to get rid of.
Here's the stripped down code:
#wrap {
border: 1px solid #000;
display: block;
position:relative;
z-index:1;
width:550px;
}
#one, #two {
height:100px;
width:550px;
background:red;
margin: 50px 0;
transition:all 1s linear;
border: 1px solid #000;
outline: 1px solid transparent;
position: relative;
z-index:2;
}
#one {
text-align:right;
transform-origin: left center 0px;
transform: perspective(150px) rotateY(1deg);
}
#two {
transform-origin: right center 0px;
transform: perspective(150px) rotateY(-1deg);
}
#one:hover, #two:hover {
transform: perspective(150px) rotateY(0deg);
transition:all 1s linear;
}
<div id="wrap">
<div id="one">one</div>
<div id="two">two</div>
</div>
jsFiddle demo
To recreate the issue, hover on the red divs and watch the right edge. At the end of the transition you will see a 5-10 pixel shift/jump.
I've tried:
Moving perspective to the parent element.
backface-visibility: hidden; and other anti-aliasing methods
Using rotate3D() rather than rotateY()
Using transform-style: preserve-3d;
Various combinations of perspective and rotation*
*Using more extreme perspective values seems to reduce the appearance of the jump, but strangely if I hover over the elements several times in succession the jump comes and goes randomly. Example
Note that the problem doesn't appear in other browsers/versions.

Answer 1

I've had a look at the issue, and you are right about the differences between the firefox versions.
The problem is the 0deg value in the rotate transformation. I've tried two different solutions, one of which seems to work every time on testing, and the other glitches occasionally.
My solution using 0rad is the occasional glitchy solution:
#wrap {
border: 1px solid #000;
display: block;
position: relative;
z-index: 1;
width: 550px;
}
#one, #two {
height: 100px;
width: 550px;
background: red;
margin: 50px 0;
transition-property: all;
transition-duration: 1s;
transition-timing-function: linear;
border: 1px solid #000;
outline: 1px solid transparent;
position: relative;
z-index: 2;
}
#one {
left: 0px;
text-align: right;
transform-origin: left center 0px;
transform: perspective(150px) rotateY(0.05rad);
}
#one:hover {
transform: perspective(150px) rotateY(0rad);
}
#two {
right: 1px;
transform-origin: right center 0px;
transform: perspective(150px) rotateY(-0.05rad);
}
#two:hover {
transform: perspective(150px) rotateY(0rad);
}
<div id="wrap">
<div id="one">one</div>
<div id="two">two</div>
</div>
My other solution requires a bit more work with positions and size to give the perception of a 0deg transform by using a value of 0.1deg.
#wrap {
border: 1px solid #000;
display: block;
position: relative;
z-index: 1;
width: 550px;
}
#one, #two {
height: 100px;
width: 550px;
background: red;
margin: 50px 0;
transition-property: all;
transition-duration: 1s;
transition-timing-function: linear;
border: 1px solid #000;
outline: 1px solid transparent;
position: relative;
z-index: 2;
}
#one {
left: 0px;
text-align: right;
transform-origin: left center 0px;
transform: perspective(150px) rotateY(1deg);
}
#two {
right: 1px;
transform-origin: right center 0px;
transform: perspective(150px) rotateY(-1deg);
}
#one:hover {
transform: perspective(150px) rotateY(0.1deg);
width: 552px;
}
#two:hover {
right: 3px;
transform: perspective(150px) rotateY(-0.1deg);
width: 552px;
}
<div id="wrap">
<div id="one">one</div>
<div id="two">two</div>
</div>
Ultimately the differences in the two solutions is the amount of work required to get it to work.
For the occasional glitch, I would suffice with rad over deg.
I hope this helps.

Answer 2

From what version did you update? I have tried Firefox 28.0, 31.0, 32.0.2, 33.0b4 (beta), 33.0b5 (beta), and 34.0a2 (alpha). All experience this issue.
After trying multiple possibilities for property values, my belief is that this is a bug in the rendering engine. While it might be possible to find some combination of properties that forces the rendering engine to be referenced to the right, using transform-origin: right center 0px; (as you have) does appear to be what should cause this to be locked to the right edge.
The correct action appears to be to file a bug with Mozilla.
Here is a screen capture of the jump I see into the <div>:
And out of the <div> (only a couple of pixels):
Looking at it some more, the bottom <div> also jumps in the vertical direction.
As mentioned, it is unlikely there will be a workaround. However, I can suggest a hack which actually makes a dramatic improvement (at least for me).
The hack is to obscure the edges which are where the issues show up. It is not really a good solution. However, for these simple mono colored divs it does look better. Here is a JSFiddle you can test with (definitely not as compete as you would need, but it will give you an idea).
html, body, * {
padding: 0;
margin: 0;
}
#mak-overwrap {
border: 0px solid #000;
display: block;
position:absolute;
z-index:0;
width:590px;
pointer-events:none;
}
#mak-wrap1 {
border: 0px solid #000;
display: block;
position:absolute;
z-index:10;
width:570px;
left:10px;
pointer-events:none;
}
#mak-wrap2 {
border: 1px solid #000;
display: block;
position:absolute;
z-index:10;
width:550px;
left:10px;
top:0px;
height:400px;
background:transparent;
pointer-events: none;
}
#mak-three {
height:300px;
width:20px;
border: 0px solid #000;
position: absolute;
top:0px;
z-index:10;
background:white;
top:30px;
}
#mak-four {
height:300px;
width:20px;
border: 0px solid #000;
position: absolute;
top:0px;
left:572px;
z-index:10;
background:white;
top:30px;
}
#mak-one-in {
height:50px;
width:75px;
border: 0px solid #000;
position: relative;
top:0px;
z-index:11;
background:transparent;
top:0px;
left:218px
}
#mak-two-in {
height:50px;
width:75px;
border: 0px solid #000;
position: relative;
top:0px;
z-index:11;
background:transparent;
top:0px;
left:274px
}
#mak-one, #mak-two {
height:100px;
width:570px;
background:red;
margin: 50px 0;
transition:all 1s linear;
border: 1px solid #000;
outline: 1px solid transparent;
position: reletive;
z-index:2;
pointer-events: auto;
}
#mak-one {
text-align:right;
transform-origin: left center 0px;
transform: perspective(120.7px) rotateY(1deg);
left:0px;
}
#mak-two {
transform-origin: right center 0px;
transform: perspective(120px) rotateY(-1deg);
left:0px;
}
#mak-one:hover, #mak-two:hover {
transform: perspective(150px) rotateY(0deg);
transition:all 1s linear;
}
<div id="mak-overwrap">
<div id="mak-wrap1">
<div id="mak-one">
<div id="mak-one-in">one</div>
</div>
<div id="mak-two">
<div id="mak-two-in">two</div>
</div>
<div id="mak-wrap2"></div>
</div>
<div id="mak-three"></div>
<div id="mak-four"></div>
</div>