Closed Bug 1697274 Opened 3 years ago Closed 1 year ago

css transition property left/top/background renders with artefacts

Categories

(Core :: Graphics: Layers, defect)

78 Branch
defect

Tracking

()

RESOLVED FIXED

People

(Reporter: gorgonz, Unassigned)

References

Details

Attachments

(3 files)

Attached file test-transition.html

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

Prefix: I don't know, if it is a bug or a feature. Just see different and more expected behaviour in chrome (89.0.4389.72 (openSUSE Build) (64-Bit))
Env: Firefox 78.8.0esr (64-Bit) in OpenSUSE 15.2

Just played around with transition property using test-transition.html. There the properties left/top/background have transitions with different duration on Hover.

Went with the mouse into the area of the div, that should be transitioned and kept it at this place until the transition is completed
Now moving the mouse outside of the initial hover-region and watch the reverse transition

Actual results:

as expected the div moves and changes the color. The effect will not stop, when the square leaves the hover area of the mouse, but continues until the duration has passed.

After moving the mouse outside of the initial hover-area teh reverse effects runs, but leaves several border lines, while moving to the initial position.

Expected results:

  1. I would have expected, that the effect stops, when the div area leaves the position of the mouse pointer, though its a nice effect too ;-)
  2. There shouldn't be any artefacts on the way back

Hint: I tried to make a screenshot of those artefacts, but they were not a part of the screenshot

The Bugbug bot thinks this bug should belong to the 'Core::CSS Transitions and Animations' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Component: Untriaged → CSS Transitions and Animations
Product: Firefox → Core

Cool, this bugbug is clever, accepted :-)

Hint correction: I didn't watch carefully, how the screenshot with "PrintScreen" was taken. It is implemented in a way, that forces a redraw of the pane. Of course the artefacts were gone. Used a different approach and now I am able to add a screenshot of the situation

Yeah, that looks bad. Can you attach your about:support information? Also, can you test with a build from https://nightly.mozilla.org and see if you can reproduce it there? Maybe it has been fixed already (I can't repro here, but my configuration might be different...)

Flags: needinfo?(gorgonz)

of course, will attach support infos.
The nightly build is a problem. I don't know howto install that on my productive system in parallel. But I have a laptop with tumbleweed, the firefox version there is 85.0.2 and shows the same behaviour

Flags: needinfo?(gorgonz)
Attached file about-support infos

ok, it was pretty simple to use nightly. Same result of both effects with 87.0b7

If you go to about:config and set gfx.webrender.all to true, does it start working? (needs a restart of the browser)

ooh nice, this solves the artefacts problem - already with ff 78 :-)
May I keep this setting or will it slow down the performance of ff?

The other one still remains

This setting is probably faster, actually, but not sure the completeness state in FF78. On release it should be pretty safe.

Ok, will fork this bug for the mouse issue, though honestly browsers are quite a mess here. Would be interesting to know if it's a regression.

Component: CSS Transitions and Animations → Graphics: Layers
Status: UNCONFIRMED → NEW
Ever confirmed: true

Yes, perfect- And thx for Your work and opinion, I will keep the Attribute for the time beeing ;-)

Severity: -- → S3

Closing per comment 10

Status: NEW → RESOLVED
Closed: 1 year ago
Depends on: fixed-by-webrender
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.