Моя проблема заключается в том, что во время перехода CSS border-radius
временно останавливает отсечение элементов внутри, если переход перекрывающегося элемента включает transform
. В моем случае у меня есть два div
, абсолютно расположенных один над другим, где первый имеет переход, вызванный действием при нажатии на элемент навигации внутри второго, например:
<div id="below"></div>
<div id="above"><div id="nav"></div></div>
Вышеупомянутый div
имеет border-radius: 50%
и закрепил nav div
. В CSS это похоже на (минимальный пример, оригинальное действие onclick
, показанное как :hover
):
#below {
position: absolute; width: 250px; height: 250px;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
#below:hover {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#above {
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
overflow: hidden;
}
#nav {
width: 40px;
height: 200px;
background-color: rgba(0,0,0,0.3);
}
Конечно, это лучше видно в http://jsfiddle.net/UhAVG/ с дополнительным стилем для лучшей иллюстрации. Это работает, как и ожидалось, в IE10 + и FF25, также в Chrome 31 и 32 с отключенным аппаратным ускорением. В результате только ускоренный Chrome показывает это нежелательное поведение. Так что мне интересно, можно ли как-то обойти это с помощью современных методов CSS3.