Bug 224483 - text-decoration-thickness property change on hover stops working at certain font sizes
Summary: text-decoration-thickness property change on hover stops working at certain f...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Text (show other bugs)
Version: Safari 14
Hardware: Mac (Intel) macOS 10.15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-04-13 05:59 PDT by Vanita Barrett
Modified: 2021-04-20 09:24 PDT (History)
5 users (show)

See Also:


Attachments
HTML example (alternative to CodePen) (2.70 KB, text/html)
2021-04-13 05:59 PDT, Vanita Barrett
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Vanita Barrett 2021-04-13 05:59:48 PDT
Created attachment 425866 [details]
HTML example (alternative to CodePen)

## Steps to reproduce
1. Open https://codepen.io/36degrees/pen/LYxQBbm or the attached example.html
2. Hover over both links of the links on the line “17px link / with colour change” - text decoration thickness property expands to 3px
3. Hover over both of the links on the line “19px link / with colour change” - text decoration thickness property only expands to 3px on the link with colour change.

## Expected Behaviour 
The text underline thickness should increase to 3px on all links when hovered.

## Actual Behaviour
In this example, the text-decoration-thickness only increases to 3px on hover on links up to a font-size of 19px, unless the link also has a colour change on hover.

The font-size at which the text-decoration-thickness property stops working changes depending on the thickness being set on hover. In the CodePen / attached example, text-decoration-thickness is set to 3px on hover and stops working at links of font-size: 19px. Other examples:

text-decoration-thickness on hover: 2px 
font-size value at which it stops working: 15px

text-decoration-thickness on hover: 5px 
font-size value at which it stops working: 27px
Comment 1 Alexey Proskuryakov 2021-04-13 14:55:58 PDT
In Safari 14.1, the underlines for 19px+ links are not painted at all (but the color ones are). Not sure if we'd want to track this aspect as a separate bug.
Comment 2 Radar WebKit Bug Importer 2021-04-20 06:00:17 PDT
<rdar://problem/76895249>