Bug 252075 - Zoom level factored into computed value of lh (line-height) unit used in CSS gradient
Summary: Zoom level factored into computed value of lh (line-height) unit used in CSS ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2023-02-10 14:09 PST by Dan
Modified: 2023-02-13 10:55 PST (History)
6 users (show)

See Also:


Attachments
A demonstration of how 1lh changes as you zoom in and out of the page (913 bytes, text/html)
2023-02-10 14:09 PST, Dan
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Dan 2023-02-10 14:09:24 PST
Created attachment 464947 [details]
A demonstration of how 1lh changes as you zoom in and out of the page

When used in a linear-gradient() CSS image, the computed value of `1lh` incorrectly changes based on zoom level.

In the attached test case, the paragraph has these styles:

p {
  line-height: 1.3;
  font-size: 20px;
  padding: 1lh;
  margin: 1lh;
  border: 1px solid;
  background-image: linear-gradient(
    transparent 0 1lh,
    #fc0 1lh 2lh,
    transparent 2lh 100%
  );
}

Zooming in and out of the page, the `margin` and `padding` are computed to `26px`, but the background image that highlights the first line of the paragraph gets out of sync.

The issue is not present in Chrome 109+.
Comment 1 Radar WebKit Bug Importer 2023-02-13 01:41:58 PST
<rdar://problem/105383208>