Bug 280941 – background: repeating linear gradient does not work with line-height when using line-height units

• Component: CSS
• Status: NEW

width: 100%;
  height: 300px;
  padding: 0; /* there is a default padding */
  background: repeating-linear-gradient(#0000 0 calc(1lh - 1px), #000 0 1lh);
  /* line-height: 1.5; use this to increase the height of the line */
  /* background-attachment: local; use this to make background move with text */


something like the above would not adjust if the line-height is increased or decreased. line-height on safari will increase the line height for a given piece of text, but this does not change the repeating linear gradient's height. this was working on the previous iteration of safari in line with chrome and FF, but it seems that the latest iteration (18+) no longer matches background calculations to the line-height if specified. instead there is a singular line-height for the repeating gradient and it doesn’t change with the text area's line-height sizing.

also does not work when turning the linear gradient 90 degrees for vertical text.

repeating-linear-gradient(90deg, calc(1lh - 0.1vw), calc(1lh - 0.1vw), 1lh)

ideally background-attachment: Local should also make the background move with text.

[Radar WebKit Bug Importer]

<rdar://problem/137813991>