CSS3 Multiple Columns and position:absolute

Question

I'm using CSS3 Multiple Columns. Inner elements have position:relative and can contain arrows with position:absolute.

.clm3{
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}

Problem: CSS3 column cut off part of arrow with position:absolute.

Example: http://jsfiddle.net/k4ucr72h/

Answer 1

Try to use this on li items in your column:

.clm3 li {
  -webkit-column-break-inside: avoid;
  -webkit-backface-visibility: hidden; 
}

Also add z-index to .countArrow class:

.countArrow {
  z-index: 1
}