I've come across what may just be a bug in Chrome, but I'm hoping to get another set of eyes on this, and hopefully tell me if I'm missing something here.
The issue:
I have some <li> tags that are spread over three CSS columns (column-count: 3), and each item has a transform property on it. When I then go to transform sub-items within these <li> tags, every sub-item that is not in the first column disappears.
Here's a built-out example on CodePen: https://codepen.io/andyranged/pen/WMdrxR
Again, this is only happening in Chrome. Thanks in advance for any help you can provide!
Actually the problem is your transform: translateY(0px) in ul.main > li which is a 2D transform...then you are using rotateZ in ul.main ul a which is 3D transform which causing this visibility issue...
So to resolve this either remove the transform: translateY(0px) from ul.main > li which I think is better as it has no mean to apply translateY(0px)...
..or apply backface-visibility: hidden to the ul.main ul a if you have any further plans to use translateY(0px)
ul.main ul a {
-webkit-transform: rotateZ(5deg);
transform: rotateZ(5deg);
backface-visibility: hidden;
}