Column-count is not working in Chrome

Question

I have a text splitted in 4 columns and it works perfectly in Safari I don\'t know why I can see just 2 columns in Google Chrome.

Tested with Chrome 55.0.2883.95 (64

Answer 1

Replace display:inline-block by display:block.

According to caniuse, for Chrome issue, you should add -webkit-perspective:1; on the container.

#people{
 -webkit-column-count:4;
 -moz-column-count:4;
 column-count:4;
 -webkit-column-gap:.5em;
 -moz-column-gap:.5em;
 column-gap:.5em;
 padding-bottom:2px;
 font-size:18px;
 line-height:21px;
 -webkit-perspective:1;
}

.keeptogether{
  display:block;
  width:100%
}

A

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs



B

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


C

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs



D

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


E

fhdjsklfhs


F

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


G

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


H

fhdjsklfhs


I

fhdjsklfhs

fhdjsklfhs


J


K

fhdjsklfhs



L

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


M

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


N

fhdjsklfhs


O

fhdjsklfhs


P

fhdjsklfhs

fhdjsklfhs





Q


R

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


S

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


T

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


U


V

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


W


X


Y

fhdjsklfhs


Z

fhdjsklfhs