Задать вопрос
Libris
@Libris
css

Не корректно работает overflow: hidden при border-radius в сафари?

На своей анимации при переключении кружков заметила баг в сафари (проверять в новом сафари на маке) overflow: hidden при border-radius не распространяется на дочерние теги. Отсекает так будто нет border-radius.
  • Вопрос задан
  • 3213 просмотров
2 комментария
Подписаться 3 Оценить 2 комментария
Решения вопроса 2
premas
@premas
Full-stack web-developer
Потыкал, нормально всё...
Mac OS Yosemite, Safari 8.0.6
Скрин

Решение:
-webkit-mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
Ответ написан
9 комментариев
9 комментариев
Libris
@Libris Автор вопроса
Сама суть ошибки крылась в свойстве transform. Оказывается в safari очень много багов связанных с transform.
При отключении этого свойства всё стало отлично работать.
Вариант с маской не всегда подходит!
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
teotlu
@teotlu
Навёрстываю упущенное
Я на круговых элементах использую вдобавок к overflow: hidden маску изображения с круговым градиентом, замечательно работает:
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
Ответ написан
1 комментарий
1 комментарий
DeadCowsDontMoo
@DeadCowsDontMoo
web
открыл через Сафари, все нормально работает, нету только эффекта (не помню как называется) с реакцией на мышку (влево\вправо) в разделе "Типы бизнеса", хотя с компа этот эффект только там и есть, так что не страшно.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Обучение моделированию процесса дуговой наплавки в CAE
25 апр. 2024, в 18:14
1500 руб./в час
Реализовать форму регистрации и авторизации на React
25 апр. 2024, в 18:13
1000 руб./за проект
Настроить и запустить email кампанию на Gmail
25 апр. 2024, в 17:54
30000 руб./за проект
Ещё заказы