Bug 226819 - Inaccurate background-size with ch units
Summary: Inaccurate background-size with ch units
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 14
Hardware: Mac (Intel) macOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-06-09 08:06 PDT by Gabor Vajda
Modified: 2021-06-16 08:07 PDT (History)
6 users (show)

See Also:

Attachments
Inaccurate background layout in Safari (158.95 KB, image/png)
2021-06-09 08:06 PDT, Gabor Vajda 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Gabor Vajda 2021-06-09 08:06:37 PDT 
Created attachment 430966 [details]
Inaccurate background layout in Safari

The issue is demonstrated here: https://codepen.io/vajdagabor/pen/VwpBRQG

I'm trying to create a (monospace) code display with repeated background pattern, where background-image is positioned precisely to every character. Setting background-size with ch unit would be ideal, but the result is inaccurate on Safari. The example works well on Chrome and Firefox.

Also, the pattern in the example is not visible when the font is small.

This is the CSS:

pre {
  background-image: linear-gradient(to right, black 0%, black 1px, transparent 1px, transparent 100%);
  background-size: 1ch;
}
Comment 1 Radar WebKit Bug Importer 2021-06-16 08:07:17 PDT 
<rdar://problem/79398089>