1721133 - Strange visual glitch with CSS opacity property and Webrender enabled

Status: RESOLVED FIXED

(Core :: Graphics: WebRender, defect)

Description

[Kimet Sport]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:90.0) Gecko/20100101 Firefox/90.0

Steps to reproduce:

Hello, we are a small company from the north of Spain with a variety of apps dedicated to sports trainings. We are submitting this bug because since the new update (90) Firefox shows a strange visual bug in one of our web applications (our sport drills designer/animator) when Webrender is enabled.

We have tested and identified this same bug in at least two or three laptops with graphics cards from different manufacturers (AMD, Nvidia) and a desktop PC, all these computers with Windows 10 and the latest version of Firefox (90).

Example video: https://streamable.com/ymvif7

Actual results:

We have a set of buttons at the top of our web application that has started flickering or glitching with the new Firefox update. The CSS property that seems to be causing this problem is "opacity" combining it with "transition all". It does not happen at all in other browsers or earlier versions of Firefox.

Disabling Webrender by changing the "gfx.webrender.force-disabled" preference to "true" in "about:config" seems to fix it, but our users are not techie and it might be difficult to explain them how to fix these technical issues on their end.

These all the CSS properties on the element that flickers, if it helps on anything:

• display: flex;
• position: absolute;
• left: 0;
• top: 0;
• z-index: 2;
• width: 100%;
• padding: .25em;
• margin-top: -2em;
• opacity: .4;
• transition: all 500ms;

Expected results:

No flickering or glitching?

Comment 1

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

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

Comment 2

[Mayank Bansal]

can you attach a publicly visible testcase to this bug?

Comment 3

[Kimet Sport]

I have created a 30 day demo account in case it helps identifying the problem:

url address: https://animator-app.kimetplanning.com
username: mozilla
password: oaRa5Tpq

Comment 4

[Timothy Nikkel (:tnikkel)]

Thanks.

Regression range

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=42c3b61f3db2df3cc5941a9e71875f06e35042f0&tochange=2a384027ee9bcee63121a68d42c8db6644c8d8aa

-> bug 1706488

Fix range

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=a0e84f443e91876a93783f6fee5fb93765f0a41e&tochange=c6aa9ce2052655b0a778ada47bc9b25b1d1bba8b

-> bug 1717207

So this will be fixed in Firefox 91, unfortunately the fix didn't make it into Firefox 90.

Comment 5

[Kimet Sport]

Ok, thank you. Looking forward the new update.

Thanks for your efforts.

Comment 6

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

Set release status flags based on info from the regressing bug 1706488