Переход непрозрачности CSS с игнорированием переполнения: скрыто в Chrome/Safari

Возникла проблема с переходами CSS, игнорирующими свойство переполнения родительских элементов во время перехода в Chrome/Safari.

JS добавляет активный класс к дочернему:

$('.child').addClass('active');

CSS для родителя/потомка

.parent {
  position:relative;
  width:250px;
  height:250px;
  background:#000;
  border-radius:250px;
  overflow:hidden;
}

.child {
  opacity:0;
  transition:1s opacity ease-in-out;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:blue;
  width:250px;
  height:250px;

  &.active {
    opacity:1;
  }
}

Вот скрипка: https://jsfiddle.net/b3ejm7qr/1/

Во время перехода содержимое дочернего элемента отображается за пределами его родителя, а затем исчезает по завершении.

Пытались добавить обратную видимость, но безуспешно.

Пытался найти ту же проблему, но безуспешно... Интересно, является ли это известной проблемой в Chrome/Safari и есть ли исправление/обходной путь?

Спасибо!


css opacity transitions
person Max Henchman    schedule 17.02.2017    source источник

Ответы (3)


arrow_upward
5
arrow_downward

У вас может быть 3 решения вашей проблемы.

Два решения, которые уже были указаны как:

  1. Добавьте z-index: 1 к своему родителю.

  2. Упомяните border-radius: 50% ребенку.

А также,

  1. Просто добавьте свойства браузера backface-visibility к родительскому элементу вместе со свойствами transform: translate3d. Вы должны установить свойства translate3d вручную из-за ошибки в браузерах webkit.

    -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
person nashcheez    schedule 17.02.2017
comment
Ах, я не знал, что мне тоже нужен translate3d, спасибо. - person Max Henchman; 17.02.2017

arrow_upward
2
arrow_downward

Я добавил z-index к обоим элементам, и, возможно, это то, на что вы смотрите. https://jsfiddle.net/b3ejm7qr/2/

Если нет, похоже, это тип ошибки, как говорит Джорджи (поиск Google, первая ссылка).

person RompePC    schedule 17.02.2017
comment
Честно говоря, я безуспешно искал несколько вариантов вашего поиска ... думаю, я не так хорошо гуглю :) спасибо! - person Max Henchman; 17.02.2017

arrow_upward
1
arrow_downward

Это может быть ошибка браузера. Но вы можете указать border-radius: 50% для вашего дочернего элемента. После указания радиуса для ребенка все будет во всех браузерах.

person Giorgi Parunov    schedule 17.02.2017
comment
Это не сработает для того, что я на самом деле создаю, поскольку изображение внутри родителя может быть любого размера, что означает, что оно не будет работать на очень широких/высоких изображениях. Спасибо хоть - person Max Henchman; 17.02.2017
comment
а что, если вы используете изображение в качестве фона с background-size:cover - person Giorgi Parunov; 18.02.2017