Text-shadow + column-count adds unexpected whitespace at beginning of second column

Howdy!

On Safari, when using the column-count CSS property to split text into multiple columns, I've noticed that when applying a text-shadow, there is an unexpected whitespace created above all subsequent columns. I've put together a codepen demonstrating the issue and its reproducibility on Safari (using latest as of this posting: Version 17.6 (19618.3.11.11.5))

Codepen: https://codepen.io/cubepresser/pen/ExqvzjL

Expected behavior:

Actual:

I tested this on the latest versions of Chrome, Firefox and Edge. This bug does not occur.

Expected behavior is that there should not be an extra line added to the beginning of the second column, third column, etc.

Here's some code if that codepen link doesn't work:

HTML:

<p id="example">0000000000111111111122222222223333333333</p>

CSS:

#example {
  font-family: monospace;
  max-width: 20ch;
  
  column-count: 2;
  column-gap: 0;
  
  word-break: break-all;
  line-break: anywhere;
  
  text-shadow: 0 0 4px black;
}
Answered by Frameworks Engineer in 810139022

Thank you for the report. I filed https://bugs.webkit.org/show_bug.cgi?id=281882 on this issue.

Accepted Answer

Thank you for the report. I filed https://bugs.webkit.org/show_bug.cgi?id=281882 on this issue.

Text-shadow + column-count adds unexpected whitespace at beginning of second column
 
 
Q