Normalize.css: Column-count not rendering correctly on chrome

Created on 13 May 2015 · 5Comments · Source: necolas/normalize.css

Also seen here

http://stackoverflow.com/questions/28595742/chrome-bug-content-not-rendering-multi-columns-properly/28618965#comment48539040_28618965

transform: translateZ(0)

I don't know if you can add this to styles with columns or not. Perhaps this would be a conditional mixin with less...

Source

MrOutput

Most helpful comment

In any case someone wondering, you can try fixing this by adding this style to child elements

-webkit-column-break-inside: avoid;
-webkit-backface-visibility: hidden;

viciantomas on 14 Feb 2018

👍5 🚀1

All 5 comments

There are some browser bugs with translateZ itself (see e.g. http://bugzil.la/1048279 & http://wkbug.com/138162 from https://github.com/twbs/bootstrap/pull/13649#issuecomment-57767763) and it creates a new stacking context (which is often undesirable), so I don't think it's a good general solution.

cvrebert on 6 Jul 2015

Browser-specific _rendering_ bugs are outside of the scope of normalizing browsers' _default styles_.

This issue should probably be closed.

fvsch on 26 Jan 2016

@fvsch thanks

MrOutput on 27 Jan 2016

In any case someone wondering, you can try fixing this by adding this style to child elements

-webkit-column-break-inside: avoid;
-webkit-backface-visibility: hidden;

viciantomas on 14 Feb 2018

👍5 🚀1

In any case someone wondering, you can try fixing this by adding this style to child elements
-webkit-column-break-inside: avoid;
-webkit-backface-visibility: hidden;

you just saved my ass man. thanks!