Bug 238998 - REGRESSION (Safari 15.4): Focused element doesn't render outline when it has an underline
Summary: REGRESSION (Safari 15.4): Focused element doesn't render outline when it has ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 14
Hardware: Mac (Apple Silicon) macOS 11
: P2 Normal
Assignee: zalan
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-04-08 05:25 PDT by Matt
Modified: 2022-04-09 10:56 PDT (History)
11 users (show)

See Also:


Attachments
Test reduction (207 bytes, text/html)
2022-04-08 08:51 PDT, zalan
no flags Details
Patch (14.29 KB, patch)
2022-04-08 16:34 PDT, zalan
no flags Details | Formatted Diff | Diff
Patch (15.92 KB, patch)
2022-04-09 06:32 PDT, zalan
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Matt 2022-04-08 05:25:04 PDT
When an element has an outline and underline set on it's focus style, the outline isn't rendered.

The following won't render the outline, but setting the text-decoration to none does.
Tabbing back & forth does sometimes show the outline, which is also sometimes partially left there once focus is moved on.

a:focus,
button:focus {
  outline: 6px double blue;
  text-decoration: underline;
}
Comment 1 Sam Sneddon [:gsnedders] 2022-04-08 07:21:12 PDT
> Tabbing back & forth does sometimes show the outline, which is also sometimes partially left there once focus is moved on.

This makes me thinks its a repaint under-invalidation bug?
Comment 2 zalan 2022-04-08 08:51:58 PDT
Created attachment 457078 [details]
Test reduction
Comment 3 Radar WebKit Bug Importer 2022-04-08 08:52:27 PDT
<rdar://problem/91484512>
Comment 4 zalan 2022-04-08 08:53:27 PDT
It looks like ink overflow issue (that we fail to compute the proper ink overflow for outline).
Comment 5 Radar WebKit Bug Importer 2022-04-08 08:53:38 PDT
<rdar://problem/91484572>
Comment 6 zalan 2022-04-08 09:55:26 PDT
Interestingly outline does not show up as ink overflow (as opposed to like text-shadow). Instead it needs some special handling (expanding repaint top/bottom etc) which has not been adopted in the modern line layout integration layer.
Comment 7 Alexey Proskuryakov 2022-04-08 14:40:52 PDT
The double outline is visible when using Safari 15.3 on macOS 12.2.1, so this looks like a regression. I can reproduce with Safari 15.4.
Comment 8 zalan 2022-04-08 15:09:00 PDT
(In reply to Alexey Proskuryakov from comment #7)
> The double outline is visible when using Safari 15.3 on macOS 12.2.1, so
> this looks like a regression. I can reproduce with Safari 15.4.
Sure it is. -> "which has not been adopted in the modern line layout integration layer."
Comment 9 zalan 2022-04-08 15:32:51 PDT
(In reply to zalan from comment #8)
> (In reply to Alexey Proskuryakov from comment #7)
> > The double outline is visible when using Safari 15.3 on macOS 12.2.1, so
> > this looks like a regression. I can reproduce with Safari 15.4.
> Sure it is. -> "which has not been adopted in the modern line layout
> integration layer."
I should have been more explicit about it by adding the regression prefix.
Comment 10 zalan 2022-04-08 16:34:27 PDT
Created attachment 457126 [details]
Patch
Comment 11 zalan 2022-04-09 06:32:36 PDT
Created attachment 457160 [details]
Patch
Comment 12 EWS 2022-04-09 10:56:29 PDT
Committed r292679 (249471@main): <https://commits.webkit.org/249471@main>

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