Разное отображение svg в браузерах. советы по реализации
Возникла проблема в реализации хэдера с блобами, у которых как-бы "анимированная текстура". В браузерах по типу хрома все отображается нормально, но в сафари на телефоне ВСЁ ломается, не могу выяснить в чем проблема( Прикладываю код, надеюсь кто-то поможет!
index.html / Helping.css / Styles.css
.movingTexture1 {
filter: brightness(0.55) contrast(1) grayscale(1);
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1.2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n) contrast(10) grayscale(10)' opacity='1'/%3E%3C/svg%3E");
background-color: #969696;
background-size: 1000px 1000px;
background-repeat: repeat;
position: absolute;
/* вместо fixed */
top: 0;
right: 0;
bottom: 0;
left: -150px;
animation: texMove1 40s linear infinite;
will-change: background-position;
}
@keyframes texMove1 {
0% {
transform: translate3d(0, 0, 0)
}
50% {
transform: translate3d(-300px, 0, 0)
}
100% {
transform: translate3d(0, 0, 0)
}
}
.movingTexture2 {
opacity: 1;
filter: brightness(0.26) contrast(1) grayscale(1);
background-color: #000000;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1.2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
background-repeat: repeat;
position: absolute;
/* вместо fixed */
top: 0;
right: 0;
bottom: 0;
left: -150px;
animation: texMove2 100s linear infinite, texRotate 1s linear infinite;
will-change: background-position;
}
.movingTexture3 {
animation: texMove3 30s linear infinite;
will-change: background-position;
}
@keyframes texMove2 {
0% {
transform: translate3d(0px, 0, 0);
}
50% {
transform: translate3d(180px, 0, 0);
}
100% {
transform: translate3d(0px, 0, 0);
}
}
@keyframes texMove3 {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(5vw, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes texRotate {
0% {
transform: rotate3d(1deg, 0, 0);
}
10% {
transform: rotate3d(3deg, 0, 0);
}
27% {
transform: rotate3d(5deg, 0, 0);
}
65% {
transform: rotate3d(2deg, 0, 0);
}
100% {
transform: rotate3d(1deg, 0, 0);
}
}
@keyframes texMove4 {
0% {
transform: translate3d(0, 0, 0)
}
50% {
transform: translate3d(-1.63vw, 0, 0)
}
100% {
transform: translate3d(0, 0, 0)
}
}
@font-face {
font-family: Adiue;
src: url(/Fonts/adiue.ttf);
font-weight: normal;
font-style: normal;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
scroll-behavior: smooth;
}
body {
height: 100%;
width: 100%;
position: relative;
font-family: Adiue;
display: block;
justify-content: center;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 17.8vh;
display: flex;
background-color: #000000;
overflow: hidden;
filter: drop-shadow(0 0px 0.3vh rgb(0, 0, 0))
}
.header_gradient {
z-index: 1;
position: absolute;
min-width: 100%;
min-height: 100%;
background:
radial-gradient(ellipse at top, #00000040, transparent),
radial-gradient(ellipse at bottom, #1a1a1a, transparent);
}
.noise {
z-index: 2;
position: absolute;
height: 345%;
top: 0%;
right: -15vh;
left: -15vh;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n' filterUnits='userSpaceOnUse' x='0' y='0' width='160' height='160'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/></svg>");
background-repeat: repeat;
background-size: 10vw 10vh;
}
.header_figureBox {
z-index: 2;
aspect-ratio: 860 / 420;
width: min(100vw, calc(90vh * (860 / 420)));
height: auto;
display: flex;
justify-content: center;
}
.header_figureBox .content {
overflow: hidden;
position: absolute;
isolation: isolate;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.header_logo {
z-index: 10;
height: 14.5vh;
transform: scaleX(1.06);
filter: brightness(0);
position: fixed;
top: .3vh;
left: 6vh;
rotate: -2.5deg;
width: min(100vw, calc(90vh * (860 / 420)));
}
.header_figure1 {
height: 999vh;
transform: translate(-19%, -65%);
}
.header_figure2 {
height: 999vh;
transform: translate(-40%, -100%);
}
.header_figeureRight {
position: absolute;
height: 100%;
width: 10vw;
right: 0;
top: 0;
}
.header_gigureRightSVG {
position: absolute;
width: 100%;
height: 100%;
}
main {
padding-top: 20vh;
height: 100%;
width: 100%;
background-color: #282828;
}
footer {
display: flex;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 8vh;
background-color: #000000;
filter: drop-shadow(0 0px 0.3vh rgb(0, 0, 0))
}
footer a {
z-index: 100;
color: #6d6d6d7a;
font-size: 2.35vh;
margin-left: 3vw;
text-decoration: none;
}
footer a:hover {
color: #ffffffaf;
font-size: 2.35vh;
margin-left: 3vw;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Styles/Styles.css">
<link rel="stylesheet" href="Styles/Animations.css">
<link rel="stylesheet" href="Styles/Helping.css">
<title>Timur Rasulov</title>
</head>
<body>
<header>
<svg class="header_figureBox" viewBox="0 0 1000 470" preserveAspectRatio="xMidYMid meet">
<defs>
<clipPath id="blobPx2" clipPathUnits="userSpaceOnUse" style="transform: scale(2.5);">
<path style="overflow: hidden;"
d=" M859.783 148.011C900.331 226.979 734 314.495 547.5 349.041C161.5 420.541 49.1726 251.407 8.62382 172.439C-31.9249 93.4701 204.179 111.629 366.416 28.3237C528.653 -54.9815 819.234 69.042 859.783 148.011Z" />
</clipPath>
<clipPath id="blobPx" clipPathUnits="userSpaceOnUse" style="transform: scale(2.6);">
<path style="overflow: hidden; transform: rotate(-1deg) translate(0,0vh); "
d="M543.119 180.879C556.502 296.731 394.32 272.362 245.016 289.61C95.7115 306.858 18.5086 274.462 5.1251 158.61C-8.25838 42.7582 99.2414 19.5886 248.546 2.3406C397.85 -14.9074 529.735 65.0271 543.119 180.879Z" />
</clipPath>
</defs>
<path
d="M859.783 148.011C900.331 226.979 734 314.495 547.5 349.041C161.5 420.541 49.1726 251.407 8.62382 172.439C-31.9249 93.4701 204.179 111.629 366.416 28.3237C528.653 -54.9815 819.234 69.042 859.783 148.011Z"
fill="#000" opacity="0.23" transform="translate(500 235) scale(2.5) translate(-360 -273)"
style="filter: blur(10px);" />
<foreignObject class="header_figure2" x="0" y="0" width="1000%" height="1000%" clip-path="url(#blobPx2)">
<div xmlns="http://www.w3.org/1999/xhtml" class="content">
<div class="movingTexture2"></div>
</div>
</foreignObject>
<path
d="M543.119 180.879C556.502 296.731 394.32 272.362 245.016 289.61C95.7115 306.858 18.5086 274.462 5.1251 158.61C-8.25838 42.7582 99.2414 19.5886 248.546 2.3406C397.85 -14.9074 529.735 65.0271 543.119 180.879Z"
fill="#000" opacity="0.23" transform="rotate(0) scale(2.71) translate(-72 -123)"
style="filter: blur(10px);" />
<foreignObject class="header_figure1" x="0" y="0" width="1000%" height="1000%" clip-path="url(#blobPx)">
<div xmlns="http://www.w3.org/1999/xhtml" class="content">
<div class="movingTexture1"></div>
</div>
</foreignObject>
</svg>
<img class="header_logo static-image" src="/Images/LogoPNG1.svg" style="animation: texMove4 40s linear infinite;">
<img class="header_logo " src="/Images/LogoPNG1.svg" style="transform: translate(-0.9vw,0); filter: brightness(1); z-index: 11;">
<div class="header_gradient"></div>
<div class="noise movingTexture3"></div>
<div class="header_figeureRight"></div>
</header>
<main>
</main>
<footer>
<a class="footer_mainlink" href="TG">TG</a>
<a class="footer_mainlink" href="VK">VK</a>
<div class="header_gradient" style="top: 0; transform: scaleY(-1);"></div>
<div class="noise movingTexture3"></div>
</footer>
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.0.1/model-viewer.min.js "></script>
</body>
</html>