ОБНОВЛЕНИЕ. Прежде чем читать этот пост и говорить, что вам нужно больше кода для репликации проблемы, простой вопрос, который я задаю, заключается в следующем:
"Вам когда-либо приходилось удалять и повторно применять свойство CSS для элемента, чтобы этот стиль применялся, когда это свойство уже было на этом элементе и должно было работать по умолчанию? Если да, то что было ваше решение или вы знали, что в конечном итоге вызывает проблему?
ОБНОВЛЕНИЕ 2. Я не уверен на 100%, но это может быть проблемой только с тегом font-size и динамически изменяться с помощью Javascript. CSS для внешних и/или внутренних элементов, которые изменяются по размеру в Javascript, работает, как и следовало ожидать, эта проблема возникает, в частности, только при выборе размера шрифта. Возможно, окружающий HTML CSS не улавливает font-size при изменениях стиля, интенсивно связанных с памятью (например, наша функция изменения размера). Просто предположим.
Остальная часть этого сообщения - это способ уточнить, о чем я говорю.
Эта проблема может быть исключительной для Chrome. Чтобы уточнить, наше приложение используется внутри нашей командой продаж, и проект был разработан, чтобы сосредоточиться исключительно на Chrome, как для разработки, так и для использования на местах. Уже сейчас стилизация полностью отключена при открытии этого в других браузерах, поскольку нам нужно было только создать наш CSS для Chrome-совместимости (как мне посчастливилось приземлиться на такую позицию, я не знаю, ха-ха).
Я столкнулся с этой проблемой несколько раз в своей карьере кодирования, которая, как я считаю, является ошибкой в CSS, но может быть редкой ошибкой между изменениями стиля Javascript в DOM и родительском контейнере CSS, не адаптирующимся к изменению из-за возможных ограничений памяти или небольшого отставания в обработке между Javascript, применяющим стиль к HTML, и CSS, не обновляющийся для размещения. Я думаю, что это важный вопрос, поскольку, как я думаю, каждый веб-разработчик в интерфейсе имеет или будет сталкиваться с этим в какой-то момент своей карьеры.
Ситуация
Чтобы сделать это как можно короче, у нас есть контейнер внутри нашего тела, мы используем Javascript для размера с соотношением сторон 16: 9 относительно размера окна. Сделал скриншот всего окна. Как вы можете видеть, у нас есть внутренний размер контейнера пропорционально внутри нашего окна браузера (черная область, которая является телом). Внутренний контейнер - это место, где отображается весь контент для нашего приложения:
Наш CSS построен, используя, по возможности, проценты. Мы построили функцию resizeUI, которая в основном используется для изменения размеров шрифтов на основе текущего соотношения ширины и высоты внутреннего экрана, хотя в этой функции есть и другие элементы, которые также имеют размер перераспределения, при изменении размера окна. Окно всегда идеально масштабируется, и все, что требуется для конкретного размера, основано на соотношении ширины и ширины внутреннего окна, как и ожидалось, с соответствующим корректированием CSS на основе дочерних элементов. Но....
Проблема
Когда окно браузера изменено, щелкнув и перетащив (инкрементное изменение размера), все на странице изменится. Однако, когда размер окна изменяется резко и мгновенно, полноэкранный режим (Максимизация) до малого (Восстановить вниз) или наоборот, размер шрифта в верхнем меню изменится, но CSS родительского li не будет регулироваться разместите новый размер шрифта, если я не уберу его атрибут padding и не перепроверяю его (добавьте обратно). Когда я это делаю, он работает нормально. Контейнер li действительно имеет только padding:1% и, таким образом, обычно правильно регулирует его размер на основе внутреннего размера диапазона, который изменяется с изменением размера шрифта.
Родительский li должен автоматически настраиваться на изменение внутреннего размера шрифта span. Я уверен в этом, потому что родительский контейнер li автоматически изменит размер самого себя, когда я изменяю размер шрифта или длину текста меню "на лету" в инспекторе.
Здесь он обычно выглядит как при загрузке, так и при изменении размера окна:
И вот как это выглядит, когда я перехожу от маленького размера окна к полноэкранному, используя Maximize:
Мое (хакерское) исправление
Единственный способ, с помощью которого я работал, - удалить дополнение для элементов <li> в верхней части функции повторного размера, а затем повторно применить его в нижней части функции повторного размера ПОСЛЕ линии который изменяет размер шрифта. Однако это работает в 50% случаев. Только при размещении тайм-аута 100 мсек в нижней части функции повторного размера для повторного применения отступов я получил его в 100% случаев.
Чтобы помочь, вот очень простой пример кода, с которым я работаю. Размер ul автоматически добавляет к нему внутренние элементы:
Соответствующий HTML
<ul>
<li class="menu-items><span>Item 1</span></li>
<li class="menu-items><span>Item 2</span></li>
<li class="menu-items><span>Item 3</span></li>
<li class="menu-items><span>Item 4</span></li>
<li class="menu-items><span>Item 5</span></li>
</ul>
Соответствующий CSS
ul {
position:absolute;
top:0;
right:2%;
text-align:center;
}
.menu-items {
padding: 1%;
}
Соответствующий Javascript
Что работает около 1/2 времени
function resizeUI(){
$('.menu-items').css('padding','0');
//Random other elements being re-sized
$('.menu-items span').css('font-size', properRatio + "px");
//More elements being resized
$('.menu-items').css('padding','1%');
}
Работает каждый раз
function resizeUI(){
$('.menu-items').css('padding','0');
//Random other elements being re-sized
$('.menu-items span').css('font-size', properRatio + "px");
//More elements being re-sized
setTimeout(function(){
$('.menu-items').css('padding','1%');
}, 100);
}
Окончательный вопрос
Кто-нибудь еще сталкивался с подобными проблемами при работе с CSS, который должен адаптироваться к переопределению элемента? Я чувствую, что это проблема памяти или ошибка между Javascript и CSS, учитывая, что установка тайм-аута - единственный надежный способ, которым я получил его в 100% случаев, и, опять же, это ТОЛЬКО происходит на огромном, мгновенном изменении в размере окна (Максимизировать для восстановления вниз или наоборот), но не по ручному, меньшему, поэтапному изменению размера. Извините за такой подробный пост/вопрос, но я несколько раз сталкивался с этой странной ошибкой, когда мне пришлось удалить и повторно применить атрибут CSS, чтобы он работал правильно, и я не сомневаюсь, что и другие разработчики тоже.
