Firefox и Safari создают пробел вокруг SVG при изменении размера окна. Хром работает нормально ⇐ Html

[Anonymous]

Я хочу заключить область просмотра двумя SVG-изображениями, каждое из которых будет занимать 50 % пространства, не оставляя промежутков между ними или вокруг них. Chrome отображает это правильно, но Firefox и Safari отображают небольшие пробелы вокруг изображений. Хотя инспектор не показывает пробелов между изображениями, они все равно видны. Эта проблема не возникает последовательно при любой ширине области просмотра; он периодически появляется при изменении размера области просмотра на меньшую или большую ширину.
То, что я обнаружил в ходе своего исследования, довольно странно:
Случай 01: Я использую ленту.svg со своего компьютера, и проблема не устранена.
Случай 02: Я загрузил svg в облако и использовал ссылку, проблема исчезла.
(В примере ниже я использовал один локально и один из облака и обнаружил, что проблема возникает с локальным)

Код: Выделить всё

.overlay {
position: fixed;
width: 100%;
height: 100%;
}

.ribbon {
width: 100vw;
/* height: 15%; */
position: fixed;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
z-index: 3;
}

.ribbon-l {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
left: 0;
width: 50vw;
height: 100%;
overflow: hidden;
}

.ribbon-r {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
right: 0;
width: 50vw;
height: 100%;
overflow: hidden;
}

.ribbon img {
width: 50vw;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 100%;
min-height: 100%;
}

Код: Выделить всё

[img]./Ribbon.svg[/img]

[img]https://i.postimg.cc/NGCKkR1C/Ribbon.png[/img]

Я пробовал использовать префиксы поставщиков, но они не решили проблему. Я ожидал, что два изображения SVG будут плавно, без каких-либо видимых зазоров, закрывать область просмотра во всех браузерах и размерах области просмотра.



Подробнее здесь: https://stackoverflow.com/questions/797 ... w-chrome-i