Мы заметили, что иногда значок SVG отображается в Safari с обрезанием одного или нескольких краев при применении его в качестве маски.
Обычно размеры этих элементов установлены в относительных размерах. единиц, и проблема возникает только при определенных размерах. Изменение размера области просмотра решает проблему.
Я предполагаю, что при вычислении правильного соотношения размера и соотношения сторон произошла какая-то ошибка округления.
Вот уменьшенный регистр, демонстрирующий проблему в фиксированном размере:
https://codepen.io/tmcltr/pen/XJrYQmG
Это тонко, но если вы наведете курсор на отрендеренный значок, вы увидите, что обрезанный нижний и левый края волшебным образом восстановлены. Это делается путем переключения -webkit-mask-size с Contain на фиксированный размер.
Использование фиксированных размеров иногда является приемлемым обходным решением, но часто мы действительно необходимо использовать contains.
Примечание. Это может отображаться, а может и не отображаться в Chrome. Я определенно видел, как эта проблема возникала в Chrome, но мне не удалось заставить этот сокращенный регистр работать там.
Подробнее здесь: https://stackoverflow.com/questions/793 ... size-conta
