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

Question

[Анна Бакурова]

На своей анимации при переключении кружков заметила баг в сафари (проверять в новом сафари на маке) overflow: hidden при border-radius не распространяется на дочерние теги. Отсекает так будто нет border-radius.

Comments

[Павел Кононенко]

Не увидел бага. Опишите яснее как повторить?

[Анна Бакурова]

Павел Кононенко: при нажатии на кружки (кафе, цветочный магазин, электроника) там анимация тоже кружочек, а в сафари там квадрат

Answer 1

[Павел Кононенко]

Потыкал, нормально всё...
Mac OS Yosemite, Safari 8.0.6
Скрин

Решение:

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

Comments

[Анна Бакурова]

нет сама анимация должна быть кружком

[Анна Бакурова]

при переключении

[Павел Кононенко]

Анна Бакурова: анимация кружком. Все четко.

[Анна Бакурова]

Павел Кононенко: извините а можно как то с Вами связаться чтобы посмотреть?

[Анна Бакурова]

Павел Кононенко: просто у начальника тоже самое и Я вижу ужас с квадратами

[Дмитрий Шинкарь]

Анна Бакурова: возможно у него iOS не обновлен?

[Анна Бакурова]

Дмитрий Шинкарь: такой же

[Анна Бакурова]

Дмитрий Шинкарь: можно как то у вас посмотреть?

[Дмитрий Шинкарь]

К сожалению нет, я на работке, а времени всем этим заниматься нету(

Answer 2

[Анна Бакурова]

Сама суть ошибки крылась в свойстве transform. Оказывается в safari очень много багов связанных с transform.
При отключении этого свойства всё стало отлично работать.
Вариант с маской не всегда подходит!

Answer 3

[teotlu]

Я на круговых элементах использую вдобавок к overflow: hidden маску изображения с круговым градиентом, замечательно работает:

-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

Comments

[Kirillkana]

Спасибо, не совсем понимаю как это работает, но в safari на iphone с заданным border-radius и overflow: hiiden у родителя.

Answer 4

[Дмитрий Шинкарь]

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

Comments

[Анна Бакурова]

сама анимация должна быть кружком при переключении