SVG scaling in Safari on iOS

Ensure the SVG Has Proper ViewBox Settings

Safari has trouble handling SVGs without a proper viewBox. If your SVG is missing it, try adding:

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" width="100vw" height="auto">

• viewBox="0 0 100 100" ensures the SVG scales correctly.
• preserveAspectRatio="xMidYMid slice" helps prevent squashing.
• width="100vw" ensures it stretches across the viewport.
• height="auto" maintains its aspect ratio.

2️⃣ Use CSS to Control the SVG’s Scaling

If your SVG is squashing, try forcing its aspect ratio and width via CSS:

.svg-container {
  width: 100vw; /* Full viewport width */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Prevent extra spacing */
}

svg {
  width: 100%; 
  height: auto;
  max-width: 100vw;
  object-fit: cover;
}

🚀 Bonus Tip: If the SVG is clipping unexpectedly, add:

overflow: hidden;

3️⃣ Fixing Safari-Specific Bugs

Safari sometimes ignores width: 100vw inside flex/grid containers. A workaround is using min-width instead:

.svg-container {
  min-width: 100vw; 
}

You can also target only Safari with this hack:

@supports (-webkit-touch-callout: none) {
  .svg-container {
    min-width: 100vw;
  }
}

4️⃣ Make Sure It Works as a Mask

Since you’re trying to mask a section with a background image, you may need to explicitly set mask-image or clip-path:

.section {
  -webkit-mask-image: url('your-svg.svg');
  mask-image: url('your-svg.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
}

For better Safari compatibility, try using clip-path instead:

.section {
  clip-path: url('your-svg.svg');
}