KJ
Size: a a a
KJ
АK
KJ
KJ
АK
KJ
KJ
АK
К
АK
Пилю компонент для сайта. Если вкратце, то использую clip-path с url(#clippathid) и внешним svg, где хранится сама маска.
Clip-path должен плавно изменяться каждую секунду на новый.
Сделал. Всё как всегда шикарно работает в хроме. Чекаю Сафари, не работает. Страдаю. Ищу в чём проблема.
Оказывается, что если изменится контент в маске во внешнем svg, то в Сафари clip-path не обновляется. Фикшу костылём с форсированным лейаутом и ресетом clip-path.
Снова чекаю Сафари, теперь clip-path обновляется, но без анимации. Страдаю. Ищу в чём проблема.
Оказывается, что в Сафари для clip-path не работает transition для d у path во внешнем svg. Переписываю анимацию d у path на js, тащя за собой 2 либы.
Снова чекаю Сафари, теперь не на 100% скейле браузера маска в несколько раз больше, чем нужно. Страдаю. Ищу в чём проблема.
Оказывается, что Сафари использует нативное разрешение при отрисовки clip-path, тогда как все остальные браузеры используют отскрейленное разрешение.
Создаю второй path в нативном разрешении экрана, не забывая об анимации. Тащу либу для детекта браузера, в Сафари использую clip-path в нативном разрешении.
Снова чекаю Сафари, всё работает! Чекаю айпад. Маска в несколько раз меньше чем нужно. Страдаю. Ищу в чём проблема.
Оказывается, что только десктоп Сафари использует нативное разрешение для отрисовки clip-path. Сафари на айпадах и айфонах используют отскрейленное разрешение.
Добавляю проверку на мобильный Сафари, врубаю для него отскрейленное разрешение.
Снова чекаю Сафари на айпаде, но ничего не изменилось. Страдаю. Ищу в чём проблема.
Оказывается, что айпады мимикрируют под маки и детектятся как маки. Добавляю костыль: у айпадов есть тач, у маков нет, так их можно различить.
Проблема в том, что в будущем у маков может появиться тачскрин, тогда всё сломается. Но другого способа я не нашёл.
Снова чекаю Сафари, и наконец всё везде работает! Вот таким простым образом из-за Сафари кол-во строк кода увеличилось со ~145 до 218, а масса моего мозга уменьшилась на 70%.
Аминь.
АK
˸A
M
3
M
A
АK