Проблемы совместимости браузеров / Анимация

Общее
1

Добрый день. Вот сделал примитивную анимация, но возник вопрос по совместимости с браузерами. В Фаерфокс и Експлорере анимация проходит нормально, а вот в Хроме (Версия 51.0.2704.106 m (64-bit)) почему то overflow: hidden; не отыгрывает. Подскажите, в чём может быть проблема.
https://jsfiddle.net/BlackStar1991/ktb3j013/2/

Ещё вопрос, 1) подскажите пожалуйста как верстальщики знают где надо проставлять -webkit- , -о- и так далее, а где оно излишнее ?
2) И ещё вопрос я пробывал #upper и #inner присваивать значения z-index: Но он почему то у меня не сработал, перекрытие тоже не сыграло, можете объяснить почему ?
Заранее спасибо!)

2

Префиксы нужно везде проставлять для новых свойств таких как анимация к примеру и линейный градиент

1 лайк
3

Попробуй оферфлов для лефт и райт задать, и относительное позиционирование ни к чему у аппера, и бордер-радиус чтоб сделать круг пишется не пикселях а в процентах равных 50%, идею твою понял но так как код написан кривовато отсюда и работа не верная.

1 лайк
4

https://jsfiddle.net/BlackStar1991/ktb3j013/5/

Чё то не помогает -webkit-overflow: hidden; для #left, #right всё равно в Хроме всё отображается некорректно.
А в чём кривоватость проявляется ?

5

Вечером до компа доберусь покажу расскажу