Javascript-форум - Эпопея inline-block, portrait, landscape ...

В выдвижной fixed панели UL как grid с тремя колонками при ориентации landscape или тремя строками при ориентации portrait. Крайняя справа (в portrait крайняя снизу) содержит UL с элементами как block или inline-block соответственно для landscape и portrait, и с абсолютным позиционированием. Соответственно сдвигается этот список либо вверх/вниз, либо влево/вправо. При смене ориентации ему возвращается значение left 0 для landscape и top 0 для portrait.

Элементы LI этого списка содержат SVG, которым задан размер как 5em ширина и auto высота. Сами SVG имеют размер 10х6,655 мм, но при расчете высоты у LI получаются небольшие различия, которые в итоге делают отличными на 1 пиксель его общую высоту, а она является шагом смещения для landscape. Поэтому при инициализации всем LI устанавливается высота элемента с наибольшей высотой.

Математика сдвига блока для обеих ориентаций одна и та же, с разницей относительно чего и на какие размеры смещение. Для landscape, это от top родителя и высота + бордюры + отступы + внешний отступ сверху, а для portrait от левой позиции родителя ширина + бордюры + отступы + внешний отступ слева. Двигать можно с шагом на один элемент или прокручивать постоянно, пока нажата соответствующая кнопка.

Сам список, это клон списка на странице, на которой он располагается иначе, имеет меньшие размеры элементов и прочее. Но выбор элемента в этом списке, это обработчик как для списка на странице, так и для списка в выдвижной панели, то-есть, выбор элемента в списке выдвижной панели, это триггер на обработчик выбора на странице. При выборе элемента в этом списке, список в выдвижной панели прокручивается так, чтобы выбранный элемент находился в видимой области, с учетом ориентации. Математика расчета при этом так же одна и та же - по индексу выбранного элемента и его размера (соответственно ориентации) рассчитывается позиция списка.

И все работало без проблем. А далее я немного накосячил, нужно было запомнить последовательность чего добавлялось, хотя бы. В общем, после каких-то добавлений правил в css или чего-то, чего не знаю, при проверке в эмуляторе мобильной версии в Firefox после смены ориентации с portrait на landscape появляется сбой в позиции списка. Если бы это было постоянно или хотя бы всегда на определенном шаге изменения позиции, то проблему можно было бы купировать. Но это чисто случайно, может происходить на любом шаге прокрутки и на любую величину некорректную.

Отладчик показывает – LI это display block, претензий нет, рассчитанная высота (шаг) 74рх, с позицией родителя и его высотой тоже все в порядке, а вот позиция самого списка возвращается какая угодно, но не кратная 74. Например, на четвертом шаге должны ожидать позицию -222рх, а возвращено может быть -223рх или -200рх, и это при том, что до этого сдвиг вверх был корректным, до позиции -222рх. Соответственно четвертый шаг сместит позицию списка ни куда ожидается. Ну а далее все кувырком будет.

В режиме desktop сколько не щелкал проблемы не наблюдал. Правда, как оказалось, надо было долго и упорно щелкать, пока не появится баг, но это иная песня. Предположил, что этот баг связан с эмуляций мобильного устройства в Firefox. Но убедится в этой правоте то надо, иначе … Установил эмулятор от Opera, какая-то хрень полурабочая, а можно сказать и не рабочая или я не понял как с ней работать. Эмулятор от Маков установить не на что, ибо после смены МП с UEFI BIOS не получается установить MacOs гостевой. Осталось пробовать эмулятор от Android Studio, а так как у меня AMD, то требующийся Intel HAXM драйвер установлен не будет, а Windos 7 не имеет функции Hyper-V, пришлось переходить на десятку, чего я так не хотел делать.

В итоге, после долгой эпопеи, запуск на нескольких эмуляторах от Android Studio показал наличие этой же проблемы в landscape. Решил проблему так - LI display block и для portrait, но с float left и с явным указанием ширины UL. Долгая и упорная проверка не выявила более таких случайностей, но вопрос остался:

- что может быть причиной такого поведения или отсутствие чего, какого css правила, например, для всего документа, может порождать такое поведение?

И второй вопрос. Выдвижную панель можно раскрыть на весь экран (FullScreen) и для dectop понятно, это и панель задач, и панель инструментов, может еще и боковая панель, будет выигрыш. Все эмуляторы загружать я не стал, ибо это имидж для каждого и не малых размеров, но в тех, что производилась проверка, панель поиска, url строка, они сами скрываются с экрана при получении фокуса документом. В общем получается, что и так доступен весь экран, за исключением системных иконок сверху/снизу. Встает вопрос – насколько будет актуален режим FullScreen для смартфонов, есть ли в нем смысл для них?