SVG background image gets cropped when animating

[leon.neuweiss (Leon Neuhäuser)]

Hey dear Webflow Wizards,

I got a problem using an svg as an background image. Basically I uploaded an svg as an image set this to position absolute and put it in the background. Then I applied a rotation animation, but when previewing this on Safari or mobile devices, it gets cropped on both sides.

When designing in Webflow everything seems to look fine. But I can’t find a solution for this problem yet. I tried to put everything on overflow: visible, optimized the svg code, but nothing works so far.

Does anyone has a clue, how to fix this bug?

---

Here is my site Read-Only: Webflow - RT Concepts Group
(how to share your site Read-Only link)

[leon.neuweiss (Leon Neuhäuser)]

Okay, I found a solution:

The problem was, that I set the width and height both to 100 %. So even though I had overflow: visible on, the SVG got cut off. So I just changed to “min-width” and “min-height” and adjusted the positioning with position absolute parameters.

Now everything seems to be fine. Even on Safari and mobile devices!

Hope that helps!

Cheers, Leon