Почему моя анимация CSS нарушает мой переполнение?

Я потратил soo долго, пытаясь понять это, и я не вижу причины, почему это вызывает эту ошибку. Вы можете видеть, что солнце и земля видны за пределами моей сцены div, которая имеет переполнение скрытого. Теперь, если вы перейдете к приведенным ниже классам и прокомментируете эту анимацию, она появится правильно.Почему моя анимация CSS нарушает мой переполнение?

.wing1 
.wing2

Почему это так действует? Это потому, что у меня есть анимация внутри div, которую я уже оживляю?

.bird *is animated* 
    .wing1 *is animated* 
    .wing2 *is animated*

Pen: http://codepen.io/LukeD1uk/pen/LVWXmB

Любое понимание было бы здорово.

источник

2015-06-04 LukeD1uk

Вероятно, из-за 'границы радиуса: 50%;'. – zgood

Я не могу воспроизвести его, на последнем FF его работает нормально, проблема в Chrome. – Drops

@ Drops прав, похоже на проблему с браузером. вам может понадобиться создать наложение, чтобы сделать ваш круг. – zgood

CSS в классе сцены

position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */ 
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */

источник

2015-06-04 14:42:33 divy3993

Рад, что это сработало для вас. Благодаря! – divy3993

Почему моя анимация CSS нарушает мой переполнение?

ответ

Смежные вопросы