Позиционирование CSS независимо от других перекрывающихся элементов (без позиции: абсолютное)

Question

Я пытаюсь создать классные анимированные облака CSS. Он отлично работает на современных настольных браузеров, но имеет проблемы с MobileSafari на прошивкой 7.

код я использую включает велосипедные облака из margin-left0% в 100%, чтобы -100% и обратно 0%. Это приводит к растягиванию окна браузера с горизонтальной полосой прокрутки, расположенной внизу. overflow-x: hidden решил.

Однако MobileSafari, похоже, не поддерживает overflow-x, что приводит к растянутому экрану с ненужной полосой прокрутки на iOS. Облака в настоящее время имеют position: absolute для перемещения независимо друг от друга, но я замечаю настройку position - relative исправляет эту проблему на iOS. Однако это возвращает меня к исходной проблеме, которая фиксировала абсолютное положение, которое было случайно перекрывающимся облаком. Мне интересно, есть ли в любом случае элементы, которые перемещаются независимо друг от друга без абсолютного позиционирования.

Сайт http://team178.github.io/DreamNext

Позвольте мне знать, если это объяснение должно быть более четким. Благодарю.

Answer 1

Решение заключалось в создании контейнера с относительным позиционированием. После этого MobileSafari перестала растягиваться.