1122885 - HTML5 CSS flicker on Transform 1s (scale)

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[Jordan]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20141126041045

Steps to reproduce:

I have a DIV.  When a mouseover occurs, it transforms, scaling up by 1.17 (taking 1 sec to do so), until the mouse leaves and then it returns to normal size (also taking 1 sec). I believe, i was running FF32 before, when everything was OK.  Then I upgraded to FF34.

*Note*  This problem does not exist with the latest IE, Chrome, or Safari browsers.

For the heck of it, I will copy and paste the CSS code of the DIV:

#divGallery div{
	border:1px solid black;
	color: fuscia;
	float: left;
	height:80px;
	margin: 5px;
	margin-bottom: 40px;
	margin-right: 5px;
	padding: 2px;
	position: relative;
	width:100px;
	-moz-transition:-moz-transform 1s;
	-ms-transition:-ms-transform 1s;
	-o-transition:-o-transform 1s;
	-webkit-transition:-webkit-transform 1s;
}

#divGallery div:hover{
	-moz-transform:scale(1.17);
	-ms-transform:scale(1.17);
	-o-transform:scale(1.17);
	-webkit-transform:scale(1.17);
	background: lightblue;
	color: blue;	
}


Actual results:

Now, when the scaling is happening, the DIV is flickering.  I have some text in the DIV, so its very obvious.




Expected results:

Upon a mouse-hover over the DIV, the div should scale larger over a 1 sec duration, smoothly.  No flickering.

Comment 1

[Loic]

Could you attach a testcase (html file) to the bug, please.

Comment 2

[Jordan]

Attachment: image

Comment 3

[Jordan]

Attachment: CSS

Comment 4

[Jordan]

Attachment: testcase.html

Comment 5

[Jordan]

After really looking hard at the transforming (scaling) on mouseover on other browsers, I do note a very slight flicker, but none as prominent as the one experienced with FF34.

Comment 6

[Loic]

Attachment: testcase.html

Testcase with CSS and jpeg.

Comment 7

[Loic]

Could you update to FF35 and test, please.

Comment 8

[Jordan]

Didn't know 35 existed. Updated. Problem still exists.  I don't know if anyone else sees it, but it flickers and.. within the flicker.. it seems to present a bottom border to the entire div (flickering).

Comment 9

[Loic]

I see the flicker and the bottom border. I tested bith Beta (FF36), and the border is missing, but the flicker is still here, like in old versions of FF.

Comment 10

[amaslo]

Still seeing this in 54 (64-bit) on Win10.