Webkit не соблюдает переполнение: скрыт с граничным радиусом

Ответ 1

Вы можете поместить абсолютный позиционный div над ним с граничным радиусом и толстой черной рамкой, чтобы блокировать части, которые вы хотите скрыть.

Я сделал демо для другого вопроса о подобной проблеме в FF3.6: http://jsfiddle.net/vfp3v/15/

border-radius; переполнение: скрыто, а текст не обрезается

Ответ 2

Во-первых, какая классная демонстрация!

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

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

Принятый ответ на тот же вопрос имеет другое исправление, которое, я думаю, действительно может помочь вам, но я не мог бы получить правильную комбинацию элементов и радиус границы.

Ответ 3

Я пытался сделать то же самое и использовал border-radius для маскировки элементов в круг.

Я смог использовать маскирование и радиальный градиент для достижения желаемого эффекта в Safari 6.0.3 (с переходами по положению и размеру).

Здесь одна строка кода, которую я добавил в элемент контейнера (маскирования):

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

Я думал, что мне придется использовать жесткие остановки цвета, как показано ниже, чтобы получить жесткий край:

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

Однако, он работает одинаково без (возможно, кто-то может просветить нас о том, почему). Обрезание не так гладко, как с радиусом границы, но оно превосходит изображение, непредсказуемо превышающее границы.

Вам может потребоваться настроить его для использования со старыми версиями Safari/Chrome и т.д., я не тестировал его в разных версиях (например, YMMV).

Ответ 4

Как представляется, проблема с браузером: https://code.google.com/p/chromium/issues/detail?id=157218

В основном, когда вы применяете анимацию к элементу, браузер будет обрабатывать ее в графическом процессоре (графическом процессоре) по соображениям производительности, а остальная часть - процессору. Это приводит к анимации над маской.

В качестве обходного пути вы можете попробовать добавить незаметное свойство transform, которое также инициирует обработку GPU для элемента маски, продвигая его на тот же уровень анимации:

#redAlert .curvedEdge {
    -webkit-transform: rotate(0.000001deg);
}

Я предполагаю, что это может варьироваться в зависимости от версии браузера, но также сообщалось, что эти другие значения запускают обработку GPU: rotate(0), translateZ(0)

Ответ 5

Кажется, что это проблема с графическим процессором/аппаратным составом. transform: translateZ(0); должен также исправить эту проблему. Для получения дополнительной информации об этом читайте http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

-webkit-transform: translateZ(0);
transform: translateZ(0);

Я включил префиксы поставщиков, но вы можете удалить их, если хотите.

Ответ 6

Кажется, это смешанное исправление:

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

Ответ 7

Как и хедз-ап, это исправление срабатывало только для меня, если я применил маску на контейнере с радиусом границы, но без границы. В конечном итоге у меня получилось что-то вроде этого:

<div style="border-radius: 15px; border: 1px solid red;">
    <div style="border-radius: 15px; overflow: hidden; -webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);">
        <span style="position: relative; left; -20px;">Some stuff that overflows.</span>
    </div>
</div>

С рамкой на внутреннем div, отсечение не было идеальным.

Совершенно странно.

Ответ 8

Я нашел еще одно возможное решение этой ошибки, используя клип CSS3, но работает только в последних версиях webkit (похоже, это работает в Chrome 24, но не в Safari 6.0.2). Ниже будет скопирован круг вокруг элемента:

-webkit-clip-path: circle(50%, 50%, 100%);

Надеюсь, что это будет реализовано больше браузерами в ближайшее время! Похоже, эта функция может иметь много интересных приложений. Вот соответствующее сообщение в блоге: http://blog.romanliutikov.com/coding/css-clip-path-landed-in-webkit/.