Переполнение: скрытые игнорируются с помощью границ радиуса и CSS-преобразования (только для веб-кита)

Я хочу иметь квадратное изображение внутри круга.

Когда пользователь наводится на изображение, изображение должно масштабироваться (увеличивать).

Круг должен оставаться того же размера.

Только во время перехода CSS квадратное изображение перекрывает круг (как если бы переполнение: скрытые не были вообще).

Вот демо с странным поведением в Chrome и Safari: http://codepen.io/jshawl/full/flbau

Работает нормально в firefox.

Ответ 1

Я удалил лишнюю разметку (круг и квадратные контейнеры... нуждался только в одном) и разработал сам img:

#wrapper {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

#test {
  width: 100%;
  height: 100%;
  transition: all 2s linear;
}

#test:hover {
  transform: scale(1.2);
}

<div id="wrapper">
  <img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA1LzA4L2JlL2JhYmllc193aXRoLjA5NGNjLnBuZwpwCXRodW1iCTg1MHg1OTA-CmUJanBn/8f195417/e44/babies_with_swagg.jpg" id="test">
</div>

Ответ 2

Вам нужно добавить этот код к родительскому элементу вашего img:

position:relative;
z-index:1;

Пример здесь: http://codepen.io/DavidN/pen/dIzJK

Ответ 3

Добавьте этот код в родительский div и решите проблему:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);

Ответ 4

Кажется, вы ставили слишком много элементов! Я создал здесь

Я отредактировал часть вашего кода SASS, чтобы использовать библиотеку компаса и лучше использовать свойства transition и transform, которые можно увидеть здесь:

body { padding: 3em; }

.circle {
    height: 500px;
    width: 500px;
    border: 1px solid black;
    @include border-radius(500px);
    overflow: hidden;
}

.circle img {
    height: 500px;
    width: 500px;
    @include transition(all 0.3s ease);
    &:hover { @include transform(scale(1.1)); }
}

Надеюсь, это поможет! Подумайте об элементе circle в качестве родительского контейнера, который имеет общую информацию о пространстве (например, 500px wide и 500px tall). Само изображение имеет закругленную границу 500px. Это элемент, который вы хотите отредактировать! Вы можете масштабировать и преобразовывать этот элемент здесь, не взаимодействуя с родительским контейнером circle. Ссылка compass за дополнительной информацией об использовании библиотеки! Удачи!