What's going on here

Note: Chrome recently stopped allowing -webkit-box-reflect on animated elements. Perhaps a bug.

This experiment makes use of -webkit-box-reflection and applying it to 11 nested divs. This compounds the reflection and when rotation is applied, you get weird geometric stuff like this happening. Different transforms, transform-origins and spacing creates slightly different patterns.

Toggling reflection


Performance seems to hinge on the total area being rendered to more than anything else. I can't explain this exactly as I would have thought the layer compositing would be much heftier than this but, simply adding a margin to spread the items out over a larger area can vastly decreases performance.

I set my performance goal to be to run acceptably on my old Samsung Galaxy S2 and decreasing the overall size and area rendered to seemed to be the way. Adding box-shadows and other theoretically taxing properties seems to make no difference.

CSS Reflection Geometry