Полная ширина SVG, ошибки округления в Safari

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

Демонстрация: https://codepen.io/mhulse/pen/PoZGEqJ

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

Мне не нужны черные рамки.

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

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

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

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


svg safari rounding-error
person mhulse    schedule 16.06.2020    source источник
comment
Как насчет фона ‹rect/›? обновлен codepen Это происходит из-за сглаживания, которого браузеры стараются избегать на большинстве компьютеров (элементы) путем округления координат. Конечно, в Safari действуют разные правила для элементов HTML и SVG, и в итоге вы получаете растянутый элемент HTML, а путь svg сжимается до ближайшей координаты пикселя. Обратите внимание, что даже в Firefox при уровне масштабирования, отличном от 100%, у вас будет такое же поведение. Принудительный рендеринг всего изображения SVG заставит использовать согласованное правило округления и, таким образом, позволит избежать этой проблемы.   -  person Kaiido    schedule 16.06.2020
comment
Вау! Ваше решение выглядит действительно многообещающе! Спасибо за ответ/помощь! сейчас тестирую. Я отвечу здесь с моими результатами. Спасибо!!!!!! Я все еще пытаюсь понять, почему прямоугольник, кажется, решает эту проблему (сейчас перечитывая ваш комментарий). Опять же, я вернусь со своими выводами, чтобы поставить вам зеленую галочку!   -  person mhulse    schedule 16.06.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вместо фона CSS вы можете использовать ‹rect/> в качестве фона непосредственно внутри вашего изображения 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 ‹svg> растянется, а внутренний ‹path> сожмется, в результате чего фон станет видимым по краям.

Рисуя ‹rect> за ‹path>, мы сохраняем всю область рисования по одним и тем же правилам, и округление останется постоянным -> ‹rect> и ‹pat> будут растягиваться или сжиматься вместе в одном направлении.

person Kaiido    schedule 16.06.2020
comment
ТЫ ЖЖЕШЬ! Большое спасибо!!! Это работает отлично. Я твой должник! :) - person mhulse; 16.06.2020