Ошибка пограничного радиуса Webkit и переполнения при использовании любой анимации/перехода

У меня возникает странная ошибка, когда я использую комбинацию overflow, border-radius и transition. У меня есть div с img внутри него. У div есть радиус границы, а переполнение - скрыто. Когда я нависаю над img, у меня есть переход, который делает изображение более крупным, чтобы создать эффект масштабирования. Проблема заключается в том, что переполнение, похоже, разбивается на нижний левый и правый нижний края изображения.

Я создал jsfiddle для вас, чтобы понять, о чем я говорю. http://jsfiddle.net/dmcgrew/HuMrC/1/

Он отлично работает в Firefox, но ломается в Chrome и Safari.

Кто-нибудь знает, что может быть причиной этого и как его исправить?

Ответы

Ответ 1

Я не знаю, правильно ли я понимаю проблему, поскольку изображение не загружается. Если вы добавили height: 100%; в .inner_block, это поможет вам решить проблему?

http://jsfiddle.net/HuMrC/2/

Ответ 2

У меня была такая же точная проблема. Добавление этого в родительский контейнер разрешило его для меня (это LESS mixin).

.transitionfix() {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0)
}

Ответ 3

Я добавил минус значение z-index для изображения и более высокое значение для родительского

li {z-index:10; overflow: hidden;}

li img {z-index: -10;}

Ответ 4

Принятый ответ не сработал у меня, потому что я не могу иметь четкую границу, увеличивающую площадь, на которую можно щелкнуть маскированный элемент, и я не хочу, чтобы она затушевывала структуру других элементов (и установила высоту на 100% 't решить проблему).

См. мой ответ на соответствующий вопрос для возможного решения.

Ответ 5

В прошлом у меня была такая проблема, когда я пытался увеличить фотографию внутри div. Я исправил это, добавив вращение scale(1.05) rotate(0.02deg) к преобразованию масштаба (Это на самом деле убрал глючные линии)

Моя проблема сегодня состоит в том, чтобы избавиться от линий смещения от эффекта hover. Удивительно, но я избавился от них, удалив overflow: hidden;

Надеюсь, это поможет будущим отладчикам.

Ответ 6

Я сталкивался с этой проблемой в Safari (это известная ошибка в Safari); исправлено путем применения -webkit-mask-image, и оно отлично работает для меня. веселит

.block{
       -webkit-mask-image: -webkit-radial-gradient(white, black);
      }