Странные артефакты с на изображениях в сафари и мобильных браузерах - PullRequest
Новая
       88

Странные артефакты с на изображениях в сафари и мобильных браузерах

0 голосов
/ 15 января 2020

Я в настоящее время размываю изображения и использую их в качестве фона всякий раз, когда изображение содержит. Я использую следующий svg-фильтр с разбросанным в два этапа фильтром, используя feGaussianBlur и feColorMatrix. Это отлично воспроизводится в Chrome, но в Safari и мобильных браузерах я вижу странные артефакты. 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <filter
      id="blurry"
      width="150%"
      height="150%"
      x="-25%"
      y="-25%"
      colorInterpolationFilters="sRGB"
    >
      <feGaussianBlur stdDeviation="45" />
      <feColorMatrix
        type="matrix"
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 0 0 0 10 0"
      />
      <feGaussianBlur stdDeviation="45" />
      <feColorMatrix
        type="matrix"
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 0 0 0 10 0"
      />
      <feComposite in2="SourceGraphic" operator="in" />
    </filter>
</svg>

Тогда в моем CSS я использую: 

-webkit-filter: url('#blurry');
        filter: url('#blurry');

Желаемый результат (на рабочем столе ):

Desired result

Результат, который я получил:

enter image description here

Показывает эти странные пробелы ..

Некоторые вещи, которые я заметил:

  • Изменение размера и положения фильтра не работает
  • На некоторых изображениях я не вижу эти артефакты
  • Замена фильтра stdDeviation не работает

Может ли это быть связано с разрешением моих изображений?

1 Ответ

1 голос
/ 15 января 2020

Это большие размытия, поэтому Safari может уменьшить разрешение фильтра. Хотя это устарело, и я думаю, что удалено из Firefox и Chrome - вы можете попробовать установить явный filterRes в элементе фильтра, потому что это все еще поддерживается в Safari.

(Также «colorInterpolationFilters» должно быть «color-» интерполяции-фильтры ")

...