Closed Bug 593792 Opened 14 years ago Closed 14 years ago

moz-transition rendering with Glitches/Artifacts on accelerated Layers

Categories

(Core :: Graphics, defect)

Product:
Core
Component:
Graphics
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
major

Tracking

()

Status:
RESOLVED WORKSFORME
Tracking Flags:
Tracking Status
blocking2.0 --- betaN+

People

(Reporter: loic.grobol, Unassigned)

References

(
URL
)

Details

Attachments

(2 files)

Rendering corruption
14.57 KB, image/png
Details
Testcase for Opacity+transform and transition+transform issues
1.45 KB, text/html
Details 
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
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.
Attached image Rendering corruption — 
I get this with and without hardware acceleration.
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 ... .
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.
(In reply to comment #6)
> I'll try layers.accelerate-none trick.
True, the rendering is now as expected.
Blocks: d3d9-layers
blocking2.0: --- → ?
Issue persistent in 20100907 nightly.
Attachment #472641 - Attachment description: A testcase for Opacity+transform and transition+transform issues → Testcase for Opacity+transform and transition+transform issues
The issue also occurs with elements which opacity is modified on hover and which are permanently rotated with -moz-transform. See testcase.
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>
Fixed within:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=fa55e317302a&tochange=9aecc4392dad
=> Bug 596152
Status: UNCONFIRMED → RESOLVED
Closed: 14 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.

Attachment

General

Creator:
Created:
Updated:
Size: