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

moz-transition rendering with Glitches/Artifacts on accelerated Layers

RESOLVED WORKSFORME

Status

()

Core
Graphics
--
major
RESOLVED WORKSFORME
7 years ago
7 years ago

People

(Reporter: Loïc Grobol, Unassigned)

Tracking

Trunk
x86
Windows XP
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(blocking2.0 betaN+)

Details

(URL)

Attachments

(2 attachments)

(Reporter)

Description

7 years ago
User-Agent:       Mozilla/5.0 (Windows NT 5.1; rv:2.0b6pre) Gecko/20100905 Firefox/4.0b6pre
Build Identifier: Mozilla/5.0 (Windows NT 5.1; rv:2.0b6pre) Gecko/20100905 Firefox/4.0b6pre

Hovering an object which has a CSS3 rotate transition property on hover cause bad display. See screenshot.

Reproducible: Always

Steps to Reproduce:
1.Go to http://css3.bradshawenterprises.com/#how2transitions
2.Test the demo
3.See?
Actual Results:  
Rotation is not smooth at all and display several artefacts.

Expected Results:  
A smooth, pretty transformation like in previous nightlies.

May be a duplicate of Bug 589143

Comment 1

7 years ago
Not a duplicate of 589143. 

Would you try disabling hardware acceleration tools > options or Firefox menu options > advanced > general > browsing > use hardware acceleration when available? Then restart Firefox and see if that changes that helps. 

If it does we need to know what graphics card and driver you have. start > run > dxdiag > ok then use the save all information button at the bottom and attach this to the bug report.

Comment 2

7 years ago
Created attachment 472374 [details]
Rendering corruption

I get this with and without hardware acceleration.

Comment 3

7 years ago
Yes, that is the current rendering. But the imageshack picture with the additional corruption can you get that to happen with HW acceleration disabled?
If you set layers.accelerate-none;false the Rendering is as expected.
Component: General → Graphics
Product: Firefox → Core
QA Contact: general → thebes
Summary: bad CSS3 rotate transition rendering on hover → moz-transition rendering with Glitches/Artifacts on accelerated Layers
Version: unspecified → Trunk
Correction:
(In reply to comment #4)
> If you set layers.accelerate-none;false the Rendering is as expected.
Should state: ... layers.accelerate-none;true ... .
(Reporter)

Comment 6

7 years ago
I still get the issue without hardware acceleration (anyway, since I'm on XP does it really changes something?). And the last nightly get the issue too. I'll try layers.accelerate-none trick.
(Reporter)

Comment 7

7 years ago
(In reply to comment #6)
> I'll try layers.accelerate-none trick.
True, the rendering is now as expected.
Blocks: 581212
blocking2.0: --- → ?
(Reporter)

Comment 8

7 years ago
Issue persistent in 20100907 nightly.
(Reporter)

Comment 9

7 years ago
Created attachment 472641 [details]
Testcase for Opacity+transform and transition+transform issues
(Reporter)

Updated

7 years ago
Attachment #472641 - Attachment description: A testcase for Opacity+transform and transition+transform issues → Testcase for Opacity+transform and transition+transform issues
(Reporter)

Comment 10

7 years ago
The issue also occurs with elements which opacity is modified on hover and which are permanently rotated with -moz-transform. See testcase.
(Reporter)

Comment 11

7 years ago
Comment on attachment 472641 [details]
Testcase for Opacity+transform and transition+transform issues

><!DOCTYPE HTML>
><html lang="en">
><head>
><title>-moz-transform rendering issue on accelerated Layers testcase</title>
><style>
>#hoveropacityonly{
>	background-color: black;
>	color: white;
>	width: 200px;
>	height: 100px;
>	opacity: 0.7;
>	margin: 20px 20px 20px 20px;
>}
>#opacityonly:hover{
>	opacity: 1.0;
>}
>
>#opacitytransform{
>	background-color: black;
>	color: white;
>	width: 200px;
>	height: 100px;
>	opacity: 0.7;
>	-moz-transform: rotate(2deg);
>	margin: 20px 20px 20px 20px;
>}
>#opacitytransform:hover{
>	opacity: 1.0;
>}
>
>#statictransform{
>	background-color: black;
>	color: white;
>	width: 200px;
>	height: 100px;
>	-moz-transform: rotate(2deg);
>	margin: 20px 20px 20px 20px;
>}
>
>#hoveringtransform{
>	background-color: black;
>	color: white;
>	width: 200px;
>	height: 100px;
>	margin: 20px 20px 20px 20px;
>}
>#hoveringtransform:hover{
>	-moz-transform: rotate(2deg);
>}
>
>#transitionhoveringtransform{
>	background-color: black;
>	color: white;
>	width: 200px;
>	height: 100px;
>	margin: 20px 20px 20px 20px;
>	-moz-transition: all 1s ease;
>}
>#transitionhoveringtransform:hover{
>	-moz-transform: rotate(2deg);
>}
></style>
></head>
><body>
>	<div id="hoveropacityonly">Hover Opacity</div>
>	<div id="opacitytransform">Hover Opacity + Static transform</div>
>	<div id="statictransform">Static Transform</div>
>	<div id="hoveringtransform">Hover Transform</div>
>	<div id="transitionhoveringtransform">Transition Hover Transform</div>
>	
></body>
></html>
Duplicate of this bug: 594380
Fixed within:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=fa55e317302a&tochange=9aecc4392dad
=> Bug 596152
Status: UNCONFIRMED → RESOLVED
Last Resolved: 7 years ago
Depends on: 596152
Resolution: --- → FIXED
blocking2.0: ? → betaN+
Resolution: FIXED → WORKSFORME
You need to log in before you can comment on or make changes to this bug.