Kevin Powell - CommunityKP-C
Kevin Powell - Community2mo ago
29 replies
lllama

safari `translateZ` and `overflow: hidden`

The short version is that these two don’t seem to play well together. I have an SVG inside a div that I want to animate out of sight. I therefore animate the top of the SVG and set overflow: hidden on the div. So far so good.

Next I wanted to add a bit of depth and so put a transform: translateZ on the SVG. However, Safari seems to completely ignore this when the overflow is set.

Can anyone think of a solution to this?

(Tbh I’m probably going to cut my loses and just do a scale but I’m curious whether anyone has any insight)
Was this page helpful?