SVG полной ширины, ошибки округления в Safari

Question

На следующем изображении обратите внимание, что слева и справа от розового SVG есть черные границы:

Демо: https://codepen.io/mhulse/pen/PoZGEqJ

Это происходит в Safari при просмотре с определенными размерами области просмотра (просто измените размер окна браузера, чтобы увидеть).

Мне не нужны черные границы.

Решение, которое я могу придумать, - это добавить тень вставки к родительскому контейнеру, то есть цвет белого фона (по сути, скрывая его).

Решения, которые я могу Не принимаю:

• Отрицательные 1px поля слева / справа. Переполнение недопустимо, так как это вызовет горизонтальную прокрутку (реальный вариант использования касается края области просмотра браузера).
• Переполнение скрыто на родительском элементе (реальный вариант использования может потребовать, чтобы дети были абсолютно позиционированы за пределами области просмотра). контейнер).

Можно ли в Safari заставить SVG всегда касаться края контейнера и не иметь черных промежутков?

Answer 1

Вместо фона CSS можно использовать в качестве фона внутри вашего SVG-изображения напрямую.

body {
  padding: 20px;
}
.box .box-x-cap {
  display: block;
  width: 100%;
}

<div class="box">
  <svg class="box-x-cap" aria-hidden="true" viewBox="0 0 1600 227">
    <rect width="1600" height="277"/>
    <path d="m0 227v-227h1600v32z" fill="pink"></path>
  </svg>
  <p>This is some content.</p>
</div>

Проблема в том, что большинство браузеров будут делать все возможное, чтобы избежать сглаживания элементов DOM, и для этого они будут округлять координаты, которые должны иметь
Safari, безусловно, использует другое правило для элементов HTML и содержимого SVG, которое приведет к этому несоответствию, когда в некоторых случаях поле CSS будет растягиваться, а внутреннее будет уменьшаются, в результате чего фон становится видимым на краях. и будут растягиваться или сжиматься вместе в одном направлении.