Хромированная ошибка - граница границы не обрезает содержимое в сочетании с переходом css

Моя проблема заключается в том, что во время перехода 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.

Ответы

Ответ 1

После нескольких экспериментов я наконец нашел решение. Иногда проще найти простые. В этом случае #above {z-index: 1;} (как в http://jsfiddle.net/UhAVG/1/) решает проблему. Дикая догадка заключается в том, что z-index предотвращает некоторую оптимизацию, которая объединяет операции с одного слоя и делает это ошибочно оптимизирует применение border-radius на элементе. С разделенными слоями это уже не так.