1820278 - CSS Problem with Hover Animation

Status: RESOLVED DUPLICATE of bug 1836703

(Core :: Graphics: WebRender, defect)

Description

[Simmon Li [:crespire]]

Attachment: GIF showing the hover flash of color.

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

Steps to reproduce:

Building a site with DaisyUI and Tailwind, I am using some components to build a dropdown menu with some hover effects.

Actual results:

There is a flash of unexpected color happening only on Firefox. I am unsure as to the root cause.

The color of the unexpected flash depends on the border color of the element under the mouse (in this case, the post card, where you can see it has a subtle border).

The console has a bunch of errors related to the border color property:
Expected color but found "color-mix". Error in parsing value for "border-<side>-color". Declaration dropped.

Expected results:

There should be no flash of color.

I originally filed the bug with the library creator on Github, and more information can be seen there: https://github.com/saadeghi/daisyui/issues/1657

I have attached a GIF showing the bug here as well.

Comment 1

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

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

Comment 2

[Gregory Pappas [:gregp]]

Please attach a reduced test case (.html file) which reproduces the problem. If it is not possible for you to create a reduced test case, just linking to a public version of the website will also work.

Comment 3

[Simmon Li [:crespire]]

Thanks, Gregory. I can deploy this application to a public URL. I am not sure I would be savvy enough to produce a reduced test case, as I am using a component library. I've hacked together a deployed version on Vercel. You'll need to "sign in" with the provided credentials, which will then shoot you back to the "post index" where this bug is taking place. That said, I cannot seem to reproduce on the production deployment but it is still reproducable on my development deployment on the bugreport_ff branch: https://i.vgy.me/qgZqWs.gif

LInk to the production version: https://buysell-kngz96s0r-crespire.vercel.app/

The repository if you might want to try doing a local dev deploy (npm start inside the client dir): https://github.com/crespire/buysell
The changes on the bugreport_ff branch will enable the frontend to log in a user and return content to the post index without a backend running.

Comment 4

[Simmon Li [:crespire]]

I am noticing that on the production version of the site, I am not getting the CSS errors in the console, like I am with the development deployment. I wonder if it comes down to an issue with the CSS compilation on the library side. Because the development deployment doesn't also do this in Chrome vs Firefox, I suspect maybe something is going on with the CSS rule before it gets processed.

Comment 5

[Simmon Li [:crespire]]

Finally, one more additional comment as I can't seem to figure out how to edit my original response, here is the issue I've opened on the project's repository: https://github.com/saadeghi/daisyui/issues/1657

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Standalone test-case.

I can repro the issue by hovering over the "SIGN IN" / "SIGN UP" buttons etc.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

I bisected this and mozregression says it is caused by bug 1757876. Glenn, can you take a look? This repros for me rather easily by moving my mouse over the top buttons, I'll try to attach a screencast.

Comment 8

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

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

:gw, since you are the author of the regressor, bug 1757876, could you take a look? Also, could you set the severity field?

For more information, please visit auto_nag documentation.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Attachment: screencast of Emilio's nightly on Linux

It doesn't repro always first try but it repros fairly quickly.

Comment 10

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

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

Comment 11

[Mayank Bansal]

I can no longer repro this on the latest Nightly. Regression points to : Bug 1836703 - Fix drop-shadow not invalidating correctly. r=gfx-reviewers,lsalzman

@emilio: Is this fixed for you? (thanks for the reduced testcase!)

Comment 12

[Emilio Cobos Álvarez (:emilio)]

Yup, thanks!