Использование SVG feTurbulence в качестве фильтра вызывает странные проблемы с рендерингом в Safari. - PullRequest
Новая
       10

Использование SVG feTurbulence в качестве фильтра вызывает странные проблемы с рендерингом в Safari.

0 голосов
/ 08 октября 2019

Я играл с облаками в css, используя SVG и фрактальный шум, но в Safari 13 (последний на момент тестирования) визуализированный вывод был полон глюков. Пример этого можно увидеть на следующем кодовом пере:

https://codepen.io/beauhaus/pen/315327cfbb84e1fca1057d851dec8fde

<svg width="0" height="0"> 
    <filter id="filter">
      <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />
      <feDisplacementMap in="SourceGraphic" scale="180" />
    </filter>
</svg>

Если вы измените размер пользовательского интерфейса предварительного просмотра в Safari, вы увидите, что облака имеют нечетные линии рендеринга между ними.

1 Ответ

2 голосов
/ 08 октября 2019

Роберт прав, вы должны сообщить об этой ошибке .

Однако, кажется, есть простой обходной путь:

Принудительное использование фильтруемого элемента для собственного слоя. очевидно, ошибка исчезает: (протестировано только с transform, возможно мое объяснение выключено). 

body {
  width: 100vw;
  height: 100vw;
  background: linear-gradient(165deg, #527785 0%, #7FB4C7 100%);
  padding: 1%;
  overflow: hidden;
}

#cloud-circle {
    width: 500px;
    height: 275px;
    border-radius: 50%;
    filter: url(#filter);
    box-shadow: 400px 400px 60px 0px #fff;
    position: absolute;
    top: -320px;
    left: -320px;
    /* Safari workaround */
    transform: translateZ(0);
}
<div id="cloud-circle"></div>
  <svg width="0" height="0"> 
    <filter id="filter">
      <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />
      <feDisplacementMap in="SourceGraphic" scale="180" />
    </filter>
</svg>
</div>
...