Асинхронность с offsetWidth
Привет, парни)
В общем в Google chrome свойство без проблем показывает результат. Но в Firefox почему-то показывает 0, если загнать в setTimeout(()=>{wrapper.offsetWidth},200), то без проблем отрабатывает и показывает ширину элемента. В чём может быть проблема? |
AndrewKokorev,
возможно хром использует кеш, а вы грузите html или css. |
Размер элемента динамический и постоянно у него разная ширина при загрузке. Потому кэш тут не при чём думаю.
|
Вы хоть пример кода приведите.
Как он создается, где и когда ширина не берется? |
function renderCanvas() {
canvasLayer_1.width = 40;
canvasPixelWidth = Math.floor((canvasBase.offsetWidth * 0.99) / canvasLayer_1.width); //здесь проблема с canvasBase.offsetWidth
canvasWrapper.style.width = `${canvasLayer_1.width * canvasPixelWidth}px`;
canvasLayer_1.height = Math.floor(canvasBase.offsetHeight * 0.99 / canvasPixelWidth);
canvasWrapper.style.height = `${canvasLayer_1.height * canvasPixelWidth}px`;
}
Сначала задаётся ширина канвасу, потом в зависимости от ширины идёт расчёт какое количество пикселей(у меня пиксельная рисовалка) влезет во внешний контейнер и от этого уже расчитывается ширина контейнера канваса. canvasBase это контейнер в котором лежат canvas. |
AndrewKokorev,
Когда элемент скрыт, например, style.display none, тогда offsetWidth равно 0, здесь написано. |
Элемент не скрыт. Просто такое ощущение чтоб в мозиле возможно код выполняется в то время когда еще не отработал CSS, но такого быть не должно, т.к. js подключен в конце документа. Проблема в том что в Chrome и Opera, у которых один движок всё работает норм, в Firefox и Edge появляется эта проблема что ширина на момент работы функции равна 0. И чтобы у элемента ширина была больше 0, нужно задать очень большую задержку минимум в 250 секунд
|
|
Цитата:
Код, который стоит в теле <body> </body>, выполняется сразу, не дожидаясь загрузки всего остального. Так, что CSS еще имеет право не примениться. Даже размещение элементов имело право не произойти, т.к. Дерево DOM построено не до конца. |
В общем сделал просто через async/await. JS подключен в конце в конце body. Всегда думал что js код выполняется после загрузки HTML и CSS , если ставить в конце body, а тут оказывается что даже дерево может даже до конца не сформироваться))Спасиб за пояснение
|
| Часовой пояс GMT +3, время: 13:59. |