CODEWITHSUNDEEP
csssafarimultiple-columns
Peminator
Peminator

Reputation: 862

Safari CSS column exhibits overflow bug

Please check this snippet in Chrome vs Safari: https://codepen.io/peminator/pen/JjdmQmy)

.col {
  column-count: 5;
  font-size: 20px;
}

.col div {
  background: #ddd;
  position: relative;
}

.col div::before {
  content: '@';
  position: absolute;
  left: -12px;
}
<div class="col">
  <div>A</div>
  <div>A</div>
  <div>A</div>
  <div>A</div>
  <div>A</div>
</div>

Why in Safari that @ is not visible? Is there some way to fix?

Upvotes: 0

Views: 1799

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

About how to fix it, it seems that the null transform hack solves the issue

.col div::before { 
  ...
  transform: translate3d(0, 0, 0);
}

(I've also tried to play with z-index and overflow but they have no effect).

It seems a problem related to the column-count property anyway

Upvotes: 4

Related Questions