1697274 - css transition property left/top/background renders with artefacts

Status: RESOLVED FIXED

(Core :: Graphics: Layers, defect)

Description

[Peter Möller]

Attachment: 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

Comment 1

[Peter Möller]

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

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

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.

Comment 3

[Peter Möller]

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

Comment 4

[Peter Möller]

Attachment: Screenshot of the artefacts

Comment 5

[Emilio Cobos Álvarez (:emilio)]

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...)

Comment 6

[Peter Möller]

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

Comment 7

[Peter Möller]

Attachment: about-support infos

Comment 8

[Peter Möller]

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

Comment 9

[Emilio Cobos Álvarez (:emilio)]

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

Comment 10

[Peter Möller]

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

Comment 11

[Emilio Cobos Álvarez (:emilio)]

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.

Comment 12

[Peter Möller]

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

Comment 13

[Gregory Pappas [:gregp]]

Closing per comment 10