Gareth Gareth - 1 year ago 41
Javascript Question

How can I prevent an added "columns" style property from cutting text in Safari 10?

In Safari 10.0, I noticed a bug: after the page loads, if I add

style="columns: 2"
to an HTML element with text, a line of text will sometimes be cut into two pieces.

Safari column bug

You can also see the problem with this JSFiddle in Safari 10.0 if you click "Run" and play with the window size:

My web app requires setting such columns after the page renders. How can I prevent the text from being cut off?

Answer Source

I was hoping for a better answer, but I'll share what I've been doing to get around the problem.

I suspected that forcing Safari to re-render the text might cause the column heights to be recalculated, so I tried changing the padding by an unnoticeable amount after the columns were set, and it worked. What I'm doing now is setting padding-left: 0.00001px on p elements as soon as the columns are set, and then using window.setTimeout to set back padding-left: 0.

This JSFiddle demonstrates my solution: