Bug 292078 – `text-decoration-color` transition omitted on `inline-flex` elements

• Component: Animations
• Status: RESOLVED FIXED

Created attachment 475052 [details]
Animate gif of the demonstration codepen

SUMMARY:

`hover:` state of an element with `display: inline-flex; text-decoration: underline; text-decoration-color: [value]` and `:hover { text-decoration-color: [changed value]` does not change the visible underline on Safari 18 like it does on all other browsers.

Additionally, tabbing focus away from that element cause the `:hover` underline state to appear and get stuck.

This happens on the two Webkit browsers I tested: both Safari 18.4 and Orion 0.99.133 on MacOS 15

----

OBSERVATIONS:

- If `<a>` tags are inline-flex, focus-visible works but hover does not
- If a `<div>` element is inline-flex, focus-visible works (if tabindex is set or by option-tabbing to the element) but hover does not
-`focus-visible:` works on `<button>` but hover does not 

According to a comment on an unrelated project, this is "a known issue for `<button>` elements"
https://github.com/radix-ui/primitives/issues/2951#issuecomment-2217172716

----

DEMONSTRATION:

https://codepen.io/maxfenton/pen/YPPZQWR/9013946683546c046e37ae78092dc1c8

HTML
```
<!-- Link transition from named color value to another named color value -->
<a href="#" class="test1">Test 1</a> <a href="#" class="inline-flex test1">Test 1 - Inline Flex</a>

<!-- Link transition from `transparent` to `currentColor` -->
<a href="#" class="test2">Test 2</a> <a href="#" class="inline-flex test2">Test 2 - Inline Flex</a>

<!-- Button examples-->
<button class="">Button Test 0</button> <button class="inline-flex">Button Test 0 - Inline Flex</button>
<button class="test1">Button Test 1</button> <button class="inline-flex test1">Button Test 1 - Inline Flex</button>
<button class="test2">Button Test 2</button> <button class="inline-flex test2">Button Test 2 - Inline Flex</button>

<!-- Div example -->
<div class="test1" tabindex="0">Test 1</div>
<div class="inline-flex test1" tabindex="0">Test 1 - Inline Flex</div>
```

CSS
```
a, button, div {
  font-family: sans-serif;
}

hr {
  opacity: 0.2;
}

button {
  font-size: 1rem;
  padding: 0;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  text-decoration: underline;
  
  &:focus-visible,
  &:hover {
    text-decoration-color: RED;
  }
}

.inline-flex {
  display: inline-flex;
}

.test1 {
  text-decoration: underline;
  text-decoration-color: BLACK;
  
  &:focus-visible,
  &:hover {
    text-decoration-color: RED;
  }
}

.test2 {
  /* This is what I'm trying to do */
  text-decoration: underline;
  text-decoration-color: currentColor;
  
  &:focus-visible,
  &:hover {
    text-decoration-color: transparent;
  }
}
```

[Radar WebKit Bug Importer]

<rdar://problem/150367425>

[alan]

Thank you for reporting this bug.
It looks like a repaint (paint invalidation) issue on inline-flex containers. (underline paints correctly when forced paint is being applied)

[alan]

Created attachment 475090 [details]
Test reduction

[alan]

Created attachment 475091 [details]
Patch

[alan]

Created attachment 475092 [details]
Patch

[Antti Koivisto]

Comment on attachment 475092 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=475092&action=review

> LayoutTests/fast/repaint/inline-flex-color-changes-fail-repaint.html:8
> +<div>PASS <div id=change_this class="inline-flex">if this is red</span></div>

stray </span>?

[alan]

Created attachment 475093 [details]
Patch

[Ahmad Saleem]

@Alan - might be same as bug 193017?

[alan]

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

[alan]

(In reply to Ahmad Saleem from comment #8)
> @Alan - might be same as bug 193017?
You are right, thank you!

[alan]

*** Bug 193017 has been marked as a duplicate of this bug. ***

[EWS]

Committed 294358@main (9cf812ebb076): <https://commits.webkit.org/294358@main>

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