text context with column-count value is 2 and text-shadow' blur is greater then 0, the second column will be bring down

Question

xiaoyaojian OP

Created Apr ’20

Replies 2

Boosts 1

Participants 3

Hello

I have a problem when I use text-shadow and coumnt-count style on a span element,

When I set text-shadow' blur value greater then 0 and column-count greater then 1, then you will see the second column ( also the third column) will bring down some distance, but it's not happen on Windows Chrome, Mac Chrome, etc, It's looks like only safari has this bug.

Following is a online demo of this bug:

link: http://jsrun.net/arfKp/edit

I'm looking forword for any response of this.

Thanks

Yulong

Boost

Answer 1

Frameworks Engineer OP

Apple

Jun ’20

Safari's rendering (testing a recent Safari Tech Preview) now seems to match Firefox with your testcase, but Chrome renders differently.

Can you test in a recent Safari Technology Preview and see if the bug still occurs?

0

Answer 2

cubepresser OP

2w

Howdy!

This bug still occurs on Safari. 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

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

0