Bug 226819 – Inaccurate background-size with ch units

• Status: NEW
• Component: Layout and Rendering

[Gabor Vajda]

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;
}

[Radar WebKit Bug Importer]

<rdar://problem/79398089>

Added some examples, since I'd love to see WebKit catch up on this.

https://codepen.io/valler/pen/dPbzPgG?editors=1100

a) shows a flexbox which demos an actual row major layout with alternating background colors for rows.

Ideally B to F should all match A when it comes to rendering the background, and box sizes also should match for A to D.

b) inline content with known width given in relative units `ch` and hardcoded background gradient stops.
c) inline content set to max-content and repeating gradient given as percentage of expected width.
d) inline content set to max-content and repeating gradient given in relative units `ch`.
e) inline content with its width truncated to the nearest relative unit `ch` using `round()`  and a repeating gradient given in relative units `ch`.
f) full width inline content with a repeating gradient given in relative units `ch`.

Declaring background sizes and gradient stops in the same units as the box size with - big, clearly visible - discrepancies is unfortunate (none of C to F are close to A or B).

*A is a column major layout, not row major (sry for the noise).