Safari not rendering SVG wave at full width reached

My SVG isn't scaling to 100% width in Safari like it is in IE, Chrome, and Firefox. Despite numerous attempts, I haven't been able to make my SVG stretch across the full width like it does in other browsers. The project is built using React.

.hero-svg {
  display: flex;
  width: 100%;
}

svg {
  display: flex;
  width: 100%;
  z-index: -1;
}
<div className="hero-svg">
    <svg viewBox="0 0 1440 320">
        <path fill="#3dd0f2" fillOpacity="1" d="M0,128L80,117.3C160,107,320,85,480,117.3C640,149,800,235,960,229.3C1120,224,1280,128,1360,80L1440,32L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"></path>
    </svg>
</div>

I attempted to use 

preserveAspectRatio = "none"
, but unfortunately, it didn't yield significant changes.

Below are screenshots comparing how the SVG appears in Chrome versus Safari:

Chrome:

https://i.sstatic.net/lyuck.png

Safari:

https://i.sstatic.net/j7ETN.png

htmlcsssvg

Answer №1

I have finally cracked the code! Here's what did the trick:

<div className="hero-svg">
    <svg  viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
        <path fill="#f0f0f0" fillOpacity="1" d="M0,32L80,32C160,32,320,32,480,37.3C640,43,800,53,960,80C1120,107,1280,149,1360,170.7L1440,192L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"></path>
    </svg>
</div>

css:

.hero-svg{
  display: flex; 
  width: 100%;

  svg{
    width: 100%;
    z-index: -1;
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I showcase an image using Angular?

Recently, I've started working with Angular and I'm trying to display images using assets. I have a service that looks like this: const IMAGES = [ {"id":1, "category": "boats", "caption": "View from the boat", "url":"assets/img/boat_01.jpeg"}, ...

htmlangular

Enhanced Fancybox Version 2 adjusts iframe width to fit content

I have been attempting to adjust the width of the iframe in fancybox v2 to fit my content properly. However, every time I try, the content appears too large within the iframe and requires horizontal scrolling to view it all. My goal is to see the entire wi ...

javascriptjquerycssiframefancybox-2

Styling trick: Positioning a paragraph next to a span filled with SVG icons

I am facing an issue with the alignment of a set of SVGs contained within a <span> element appearing below a <p> element. I want the span to line up with the text 'Question 1'. Methods I have attempted: No conflicting margins or pa ...

cssalignment

Using JavaScript to calculate dimensions based on the viewport's width and height

I have been trying to establish a responsive point in my mobile Webview by implementing the following JavaScript code: var w = window.innerWidth-40; var h = window.innerHeight-100; So far, this solution has been working effectively. However, I noticed th ...

javascriptcssviewport

Access a document from a collaborative directory directly in a web browser

When I paste the shared path for a PDF file into the address bar, it opens perfectly in all browsers. The code below works fine in IE 8 but not in Chrome and Firefox. Code: function openPDF(file) { window.open(file, '_blank'); } function link ...

javascriptjqueryhtmljqgridanchor

javascript doesn't execute the php script

Hello everyone, I've been working on a project for quite some time and I’ve encountered an issue that I can't seem to solve. Hopefully, you can help me out with this. I have a digital LED strip controlled by an Arduino, which in turn is control ...

javascriptphphtml

Currently working on enhancing the responsiveness of the login form

I am encountering difficulties while trying to make the page responsive. I've checked my basic code, but something seems off. Could you please take a look at the plnkr link below and give me some feedback on where I might have gone wrong? Here's ...

htmlcssbootstrap-4

Tips on ensuring the first column of an HTML table remains fixed in responsive design

I am trying to create a responsive HTML table where the first column remains fixed. I have a select box on my PHP page and I am using AJAX to display data from a database in the HTML table. However, when selecting a value in the select box in a responsiv ...

phphtml

Tips for sending <p> data to a router function with HTML

I am currently working on a page where users are presented with a list of unverified accounts, each containing its own form element. Each form has a "submit" button that triggers a POST call to /verify. However, I am facing an issue where the data within t ...

javascripthtmlnode.jsexpresshandlebars.js

What is the best way to capture user input using an onClick event in JavaScript and then display it on the screen?

I'm in the process of upgrading a table, and while most of it is working fine, there is one function that's giving me trouble. I want this function to return an input with an inline onClick event. The actual return value is displaying correctly, ...

javascriptjqueryhtmldatatables

Newbie inquiries regarding the process of migrating a CRUD application to PhalconPHP

I have recently delved into using PhalconPHP 1.3.1 for an application related to my master's thesis. While it is still a work in progress, I am currently focusing on implementing CRUD functionality and refining the user interface. This endeavor marks ...

phphtmlajaxnginxphalcon

Set border-image to have rounded corners

I am attempting to create a circular button with a unique border effect. Here is the code I have implemented so far: body { display: flex; height: 100vh; overflow: hidden; justify-content: center; align-items: center; } button { height: 80px ...

htmlcsssvg

Creating an HTML button that functions as a link to a specific section on the same page

I am interested in creating an HTML button that functions as a link to an item on the same page. Essentially, when this button is clicked, it should redirect to an item within the same page. Is there a way to achieve this using only HTML, CSS, and JavaScr ...

htmlbuttonhyperlink

Several A-frames with a variety of animations

Is there a way to apply multiple animations to one object in A-frame? My goal is to make a gltf model move 5 spaces backwards, and then five spaces to the left once the initial animation is finished. How can I accomplish this task? ...

htmlaframe

JavaScript encounters an Access Denied error when attempting to read data from a JSON file in

My code is experiencing issues on IE browser and Chrome, but works perfectly on FireFox. var currentPage = 1; var max = 0; var myList = []; var links = []; $.ajax({ cache: false, type : 'GET', crossDomain: true, ...

javascripthtmljsonajaxinternet-explorer

Delay in dropping while using React Beautiful DnD

While incorporating react-beautiful-dnd into my project, I faced an issue where the dragged item is initially positioned incorrectly in one of the lists. There is a brief delay before it jumps to its correct position. You can see the problem in action by ...

cssreactjsreact-beautiful-dnd

Create a navigation bar using CSS that is designed from an unordered list without any specific

Is it possible to create a multilevel menu using only CSS for the menu structure mentioned below? Websites like cssmenumaker.com showcase examples of menus with 2-3 level submenus by adding classes like has-submenu. Can we achieve this without adding any ...

jqueryhtmlcssmenu

Is it possible to use jQuery to update CSS styles in an AJAX request

Is it possible to update the CSS of divs that are injected into files but do not exist in the main HTML file? In my main HTML file, I have: <div id="container"> <div id="page"> <!placeholder> </div></div> I am having tr ...

htmlcssajaxjquery

The overlay background is not covering the entire height of the container

The CSS includes a .wrapper with the style min-height: calc(50% - 30px), along with an overlay blur div to cover the entire height of the .wrapper element. Here's a link to a Codepen example showcasing this setup: https://codepen.io/palaniichukdmytro/ ...

htmlcss

Iterating through every image displayed on a webpage

Two inquiries: What is the best way to efficiently loop through every image on a specific webpage and open each one in a new browser tab? Similar concept, but instead of opening in a new tab, I am interested in substituting different images for the ...

javascripthtmldom