CSS transforms within CSS columns disappear (Chrome)

Question

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!

Bhuwan · Accepted Answer · 2018-02-17T21:45:31.007

5

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;
}

Updated Codepen ▸

edited Feb 17 '18 at 21:45

answered Feb 17 '18 at 21:27

Bhuwan

16,525
5
34
57

Thanks for your answer! This is weird – in this particular case, it doesn't seem to be particularly related to the `rotateZ` being a 3D transform. If I changed those child `` tags to simply `translateX(15px)` instead (which is a 2D transform), the problem persists. Either way, your answer is correct, since it was a `backface-visibility` issue in the end! By the way - I totally agree with you that a `translateY(0)` on the parent elements is useless (lol), but the reason it's there is because in practice, I was animating those elements in from `translateY(2em)` to `translateY(0em)`. – Andrew Rubin Feb 18 '18 at 22:04
I'd also like to ask whether you think that behavior is still buggy... If it works in the first column, shouldn't it work in the subsequent columns with _no_ `backface-visibility` property? (assuming I'm only using 2D transforms)? – Andrew Rubin Feb 18 '18 at 22:15
This solved my problem as well. I don't think the _problem_ is the mixed use of 2d and 3d transform, I think the browser should be able to handle it. I'd say it's a bug. – Henrik Christensen May 08 '18 at 08:24
Just an update: it was indeed a bug. I filed a Chromium bug report, and it has since been resolved a couple versions of Chrome ago! – Andrew Rubin Jun 16 '18 at 22:58

CSS transforms within CSS columns disappear (Chrome)

1 Answers1