Closed
Bug 593792
Opened 14 years ago
Closed 14 years ago
moz-transition rendering with Glitches/Artifacts on accelerated Layers
Categories
(Core :: Graphics, defect)
Tracking
()
RESOLVED
WORKSFORME
| Tracking | Status | |
|---|---|---|
| blocking2.0 | --- | betaN+ |
People
(Reporter: loic.grobol, Unassigned)
References
()
Details
Attachments
(2 files)
Rendering corruption
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•14 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 3•14 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?
|
||
Comment 4•14 years ago
|
||
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
|
|
||
Comment 5•14 years ago
|
||
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•14 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•14 years ago
|
||
(In reply to comment #6)
> I'll try layers.accelerate-none trick.
True, the rendering is now as expected.
|
|
||
Updated•14 years ago
|
Blocks: d3d9-layers
blocking2.0: --- → ?
|
|
Reporter | |
Comment 8•14 years ago
|
||
Issue persistent in 20100907 nightly.
|
|
Reporter | |
Comment 9•14 years ago
|
||
|
|
Reporter | |
Updated•14 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•14 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•14 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>
|
|
||
Comment 13•14 years ago
|
||
|
||
Updated•14 years ago
|
blocking2.0: ? → betaN+
Resolution: FIXED → WORKSFORME
You need to log in
before you can comment on or make changes to this bug.
Description
•