SVG section dividers displaying incorrectly on different browsers! HELP!

[glipinska (Gabriela Lipinska)]

Hi, I was wondering if somebody could help me out, I desperately need it! I’m working on responsiveness, everything appears as expected on chrome browser, but as soon as I switch to Safari or view the website on my iPad, there’s this weird gapping issue with my svg page dividers, like it doesn’t go to the edges of the page. The vw is set to 100. I almost fixed it by making the parent element a flex container and centering the child, then setting the vw to 101 so it overflows past the edges of the page a tiny bit, but that just caused one section divider to disappear completely (seems to be an issue with flexbox on IOS now?? Because again, it looked fine in Chrome). Also, theres a gapping issue between the sections and the dividers, again, only on IOS (I added -1px margins to try to solve this, did nothing.) I’ve included an image of what the gapping looks like.

Here is my preview link: Webflow - flowerpot Design Studios

[glipinska (Gabriela Lipinska)]

I’d like to also add that the SVG dividers I made are not rendering properly. I was wondering if it has something to do with the positioning? The dividers are positioned with a Z-index so that they sit over the embedded video and the flowers cascade down underneath the divider. When I move the divider out of the section with the BG video, it works, but then the flowers are unable to cascade behind the divider.

As you can see in the images below, the divider completely vanished on the Instagram browser, but on Safari browser it’s displaying fine.