Bug 282009 – :hover does not apply outline styles if there is also a text-decoration style

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Alex Chan]

Created attachment 473025 [details]
Screen recording of the demo

Here's a simple reproduction test case:

```
<style>
  div { display: block; height: 50px; background: #ccc; margin: 1em; }

  div:hover {
    outline: 5px solid blue;
  }

  div#outline_and_text_decoration:hover {
    text-decoration: underline;
  }
</style>

<div id="outline_and_text_decoration">
  this gets an outline and text-decoration on hover
</div>

<div id="outline_only">
  this only gets an outline on hover
</div>
```

## Expected behaviour ##

* When you hover over the first link, it should get a thick blue outline and an underline.
* When you hover over the second link, it should only get a thick blue outline.

## Actual behaviour ##

* Hovering over the first link behaves incorrectly: it only gets the underline, no outline.
* Hovering over the second link behaves correctly: it gets the outline.

## Affected versions ##

I was able to reproduce in:

* Safari 17 in macOS Sonoma 14.6.1 (I didn't get an exact version number, sorry)
* Safari 18.0.1 (19619.1.26.111.11, 19619) in macOS Sonoma 14.6.1
* Safari Technology Preview Release 206 (Safari 18.0, WebKit 19621.1.3.21.1)

Firefox and Chrome both do what I'd expect. I've attached a screen recording comparing Safari 18.0.1, Firefox 131.0, and Chrome 130.0.6723.70.

Safari/WebKit seem to have some awareness of what the right thing is here, because applying the hover styles using the Web Inspector has the desired effect.

## The :hover is important ##

If you have a persistent `text-decoration` and then apply an `outline` style on :hover, it works correctly.

i.e.

```
div#outline_and_text_decoration {
  text-decoration: underline;
}
```

instead of

```
div#outline_and_text_decoration:outline {
  text-decoration: underline;
}
```

## Related bugs ##

I'm not sure if these are related, but I remembered a previous :hover bug I had with the anchor element: https://bugs.webkit.org/show_bug.cgi?id=61697, https://bugs.webkit.org/show_bug.cgi?id=187799

[Alex Chan]

The expected/actual behaviour should read:

"hover over the first **div**" not link

I initially encountered this bug on <a> and thought maybe it was a-specific because of 61697, but changed to div as a more generic element for the repro.

[alan]

It looks like a repaint issue as when repaint is forced (option+command+p -debug only) outline shows up fine.

[Radar WebKit Bug Importer]

<rdar://problem/138637831>

[alan]

Created attachment 473042 [details]
Test reduction

[alan]

Created attachment 473048 [details]
[fast-cq]Patch

[EWS]

Committed 285763@main (a6d261838dcb): <https://commits.webkit.org/285763@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 473048 [details].