Bug 61697 – a:hover fails to work if it is the same color as a:link

• Status: REOPENED
• Component: CSS

[Joseph Pecoraro]

Created attachment 95279 [details]
[REDUCTION] Test Case

Reduction attached.

This fails:

    <style>
    a:link { color: red; }
    a:hover { color: red; }
    <style>
    <a>Does not become red when hovered.</a>

This works:

    <style>
    a:link { color: yellow; }
    a:hover { color: red; }
    <style>
    <a>Does become red when hovered.</a>

[Mihnea Ovidenie]

In the first case, the color does not change when hover, so technically there is no style difference. In this case, RenderStyle::diff returns StyleDifferenceEqual and the link is displayed using the color associated with the :visited style.

Would it be an acceptable solution to modify RenderStyle::diff function to return StyleDifferenceRepaint when inherited_flags._insideLink != NotInsideLink?

[Mustafizur Rahaman (rahaman)]

(In reply to comment #1)
> In the first case, the color does not change when hover, so technically there is no style difference. In this case, RenderStyle::diff returns StyleDifferenceEqual and the link is displayed using the color associated with the :visited style.
> 
> Would it be an acceptable solution to modify RenderStyle::diff function to return StyleDifferenceRepaint when inherited_flags._insideLink != NotInsideLink?

when I first ran the test case in Safari, I saw the issue. But then when I cleared the history & reload the test case again, everything was working fine.

Don't know why the behavior was different in the first case

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6 on macOS 12.5 using attached test case and upon hover on first line, it does not turn to red while all other browsers (Chrome Canary 106 and Firefox Nightly 104) does change the text to red upon hover.

Just wanted to share update testing results. Thanks!

[Ryosuke Niwa]

wow, this is such a bizarre bug.

[Radar WebKit Bug Importer]

<rdar://problem/97529381>

[Ryosuke Niwa]

If I add a different background color, it would work as well so it's probably some style invalidation bug.

[Tim Nguyen (:ntim)]

I have an idea how to fix this.

[Tim Nguyen (:ntim)]

actually nevermind

[Alex Chan]

In case it's helpful, I encountered a similar behaviour where a:hover fails to work if it's the same as a, and there's a rule for a:visited.  The rule for a:hover should override the a:visited, but it doesn't when it's the same as a plain a.

I suspect this has the same root cause as this bug.

This fails:

    <style>
    a         { color: green; }
    a:visited { color: red; }
    a:hover   { color: green; }
    </style>

    <a href="https://webkit.org">WebKit website</a> <br>
    <a href="https://developer.mozilla.org/en-US/">MDN Web Docs</a>

This works:

    <style>
    a         { color: green; }
    a:visited { color: red; }
    a:hover   { color: blue; }
    </style>

    <a href="https://webkit.org">WebKit website</a> <br>
    <a href="https://developer.mozilla.org/en-US/">MDN Web Docs</a>

This also works:

    <style>
    a         { color: green; }
    a:visited { color: red; }
    a:hover   { color: green; background: yellow; }
    </style>

    <a href="https://webkit.org">WebKit website</a> <br>
    <a href="https://developer.mozilla.org/en-US/">MDN Web Docs</a>

[Ryosuke Niwa]

I can reproduce this on STP189.

[Matthieu Dubet]

Pull request: https://github.com/WebKit/WebKit/pull/26797

[EWS]

Committed 279411@main (e451a390febd): <https://commits.webkit.org/279411@main>

Reviewed commits have been landed. Closing PR #26797 and removing active labels.

[WebKit Commit Bot]

Re-opened since this is blocked by bug 274889