🚧  www.samjarv.is is experiencing a mild case of re-development at the moment, run while you still can!  🚧
🚧 Site is in development 🚧

Note: Chrome recently stopped allowing -webkit-box-reflect on animated elements. Perhaps a bug. You can pause the animation and it applies.

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.