0

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

Я применил такой стиль к канвасу <style> canvas{ border-radius: 50% !important; } </style>

В итоге в фаерфоксе всё работает гуд В гугл хроме по прежнему квадрат НО если зайти в режим разработчика, то что-то обновляется и показывается круг как и должно. Есть идеи как исправить отображение в гугл хроме?

Сайт вот, элемент к которому применяется эффект находится в самом низу страницы http://project2884572.tilda.ws/ Проблема

1 ответ 1

1

Это похоже старый баг. Чинится добавлением свойства канвасу:

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

Источник: https://stackoverflow.com/questions/10616668/how-to-hide-canvas-content-from-parent-rounded-corners-in-any-webkit-for-mac/12336233#12336233

1
  • Вы помогли решить мне проблему, над которой я сидел часов 20, учитывая что я понимаю код только по наитию)) посылаю всевозможные лучи добра 2 сен 2020 в 6:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.