[Webkit-unassigned] [Bug 282009] New: :hover does not apply outline styles if there is also a text-decoration style

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=282009

            Bug ID: 282009
           Summary: :hover does not apply outline styles if there is also
                    a text-decoration style
           Product: WebKit
           Version: Safari 18
          Hardware: Unspecified
                OS: macOS 14
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: New Bugs
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: webkitbugzilla at alexwlchan.net

Created attachment 473025

  --> https://bugs.webkit.org/attachment.cgi?id=473025&action=review

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20241023/319455c0/attachment.htm>