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

[Anonymous]

Я хочу заключить просмотр двумя изображениями SVG, каждый из которых покрывает 50% пространства, не оставляя пробелов между ними или вокруг них. Chrome делает это правильно, но Firefox и Safari демонстрируют небольшие пробелы вокруг изображений. Хотя инспектор не показывает пробелов между изображениями, они все еще видны. Эта проблема не возникает последовательно по всей ширине просмотра; Это периодически появляется при изменении размера размера порта просмотра до меньшей или большей ширины. использовал один локально и один из облака и обнаружил проблему, возникающую для локального) < /p>
my html: < /p>










< /code>
my css: < /p>
.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%;
}
< /code>
Я попытался использовать префиксы поставщиков, но они не решили проблему. Я ожидал, что два изображения SVG будут беспрепятственно охватить порт Views, без каких -либо видимых пробелов, во всех браузерах и размерах Viewport.


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