Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.01.2020, 09:50
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,655

Эпопея 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 для смартфонов, есть ли в нем смысл для них?
Ответить с цитированием
  #2 (permalink)  
Старый 31.01.2020, 13:13
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,709

Сообщение от laimas
что может быть причиной такого поведения или отсутствие чего, какого css правила, например, для всего документа, может порождать такое поведение?
Вместо этого эссе лучше приведите код, в котором видна / предполагается проблема.

Сообщение от laimas
насколько будет актуален режим FullScreen для смартфонов, есть ли в нем смысл для них?
Конечно актуален, например проигрывание видео во весь экран, слайдшоу, игра и пр.
Ответить с цитированием
  #3 (permalink)  
Старый 31.01.2020, 13:47
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,655

Сообщение от Malleys
Вместо этого эссе лучше приведите код
Он уже изменен с учетом написанного выше, да и если бы не изменял, к сожалению привести даже текущий в течении нескольких дней нельзя, при переносе базы поспешил, придется заново готовить/восстанавливать.

Было замечено одно отличие, надо полагать с этим все и связано. Ранее, когда при портретной ориентации элемент списка был inline-block, то при смене ориентации имея block, в отладчике в разметке отображались все размеры его - бордюр, отступы, а вот на странице область занимаемая им (высота) была без учета нижнего бордюра, а это 1 пиксель. Когда элементы в обеих случаях block, область занимаемая им показывается четко от края верхнего отступа, до края нижнего бордюра.

Я могу привести css и родителя и списков, если это поможет выяснить причину. Стили тела документа взяты те что уже имеются, там в общем то размер шрифта и более ничего. А может быть как раз и надо было что-то объявить.
Ответить с цитированием
  #4 (permalink)  
Старый 13.09.2020, 23:02
Новичок на форуме
Отправить личное сообщение для Marchik Посмотреть профиль Найти все сообщения от Marchik
 
Регистрация: 13.09.2020
Сообщений: 1

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

Последний раз редактировалось Marchik, 15.09.2020 в 10:24.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сделать из 25 функций одну. nathan111777 Общие вопросы Javascript 2 12.05.2019 22:21
почему селект вдруг перестал работать в эксплорере и гуглхроме? Краса (X)HTML/CSS 44 04.05.2013 18:18
Нужны интузиасты (JS) qwert_ukg Общие вопросы Javascript 5 21.09.2012 12:28
коррекция кода harek13 jQuery 1 16.12.2010 16:13