HTML5 CSS flicker on Transform 1s (scale)

UNCONFIRMED
Unassigned

Status

()

UNCONFIRMED
4 years ago
2 years ago

People

(Reporter: chillin5000, Unassigned)

Tracking

({testcase})

34 Branch
x86_64
Windows 7
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments, 1 obsolete attachment)

12.51 KB, image/jpeg
Details
CSS
670 bytes, text/css
Details
376 bytes, text/html
Details
(Reporter)

Description

4 years ago
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

4 years ago
Could you attach a testcase (html file) to the bug, please.
Flags: needinfo?(chillin5000)
Keywords: testcase-wanted
(Reporter)

Comment 2

4 years ago
Created attachment 8550769 [details]
image
Flags: needinfo?(chillin5000)
(Reporter)

Comment 3

4 years ago
Created attachment 8550770 [details]
CSS
(Reporter)

Comment 4

4 years ago
Created attachment 8550771 [details]
testcase.html
(Reporter)

Comment 5

4 years ago
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.

Updated

4 years ago
Attachment #8550771 - Attachment is obsolete: true

Comment 6

4 years ago
Created attachment 8550808 [details]
testcase.html

Testcase with CSS and jpeg.

Updated

4 years ago
Keywords: testcase-wanted → testcase

Comment 7

4 years ago
Could you update to FF35 and test, please.
(Reporter)

Comment 8

4 years ago
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

4 years ago
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.
Component: Untriaged → Layout
Product: Firefox → Core

Comment 10

2 years ago
Still seeing this in 54 (64-bit) on Win10.
You need to log in before you can comment on or make changes to this bug.