I don't understand why when using an SVG image as background-image with background-repeat looks so unsharp on Chrome, but it look more than fine on Safari or Firefox. Here is a CodePen reproducing the issue.
.bg {
width: 100%;
height: 3000px;
background-size: max(100%, 1080px);
background-repeat: repeat-y;
background-image: url('bg.svg');
}
body {
margin: 0;
}
As you can notice, in the above links OR directly in the Chrome or Safari browsers, the curves are unsharp in Chrome (why?), but they look clean and sharp in Firefox (same in Safari).
I can't believe that in 2020 Chrome is so bad at using SVG image as background.
Any help is appreciated! Thanks! Take care!
