If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

HTML5 CSS flicker on Transform 1s (scale)

UNCONFIRMED
Unassigned

Status

()

Core
Layout
UNCONFIRMED
3 years ago
4 months ago

People

(Reporter: Jordan, 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

3 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

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

Comment 2

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

Comment 3

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

Comment 4

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

Comment 5

3 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

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

Comment 6

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

Testcase with CSS and jpeg.

Updated

3 years ago
Keywords: testcase-wanted → testcase

Comment 7

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

Comment 8

3 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

3 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

4 months 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.