smithana

не забывайте про плотность пикселей.
на iPhone 5 ширина дисплея 640px, но сайты отображаются как 320.

нашёл вот такое интересное решение.
www.backalleycoder.com/2013/03/18/cross-browser-ev...

Суть в том, что небольшой скрипт добавляет в элемент object и вешает listener на изменение его размера.
Работает на ура, с одним единственным косяком. В IE даже 10-ом, object имеет рамку. которую мне не удалось убрать ни какими стилями(

Картинку с помощью background-mage назначить для body.
А первому белому и второму красному блоку назначить цвет с полупрозрачностью с помощью rgba.

нашёл первый косяк данного решения. Когда сайбар больше по высоте, чем основная часть, то он наползает на футер. Думаю, что исправить это можно только с помощью js, и при загрузке проверять, если высота сайдбара больше высоты основной части, то основной части назначать высоту сайдбара. Минус - если у пользователя не работает js, то всё будет выглядеть очень плохо.

Попробовал вариант, предложенный выше - добавлять паддинг. Хотел убрать дёрганье с помощью св-ва transition, но образовалась гораздо более серьёзная проблема. Паддинг добавляется бесконечно, т.к. вместе с увеличением высоты сайдбара увеличивается и высота всего сайта.

Борьба с ними очень простая

это борьба не с последствиями, а их предотвращением. Ситуацию приняли к сведению и будем закручивать гайки.

На данный момент обратились в компанию по расшифровке данных. Обещают по удалённому доступу всё расшифровать.

Вот я и засел писать кастомный слайдер.
Идею раздвижения картинки взял отсюда (вариант 3):
https://codepen.io/FWeinb/pen/JvlKk
Простейщий самописный слайдер взял здесь:
https://codepen.io/zuraizm/pen/vGDHl

И как только начал думать как мне всё это совместить, нашёл почти то, что мне нужно было с самого начала:
tympanus.net/codrops/2012/06/05/fullscreen-slit-sl...

Этого функционала мне достаточно.