|
|
12.04.2020, 22:08
|
|
Интересующийся
|
|
Регистрация: 25.02.2020
Сообщений: 19
|
|
|
Асинхронность с offsetWidth
Привет, парни)
В общем в Google chrome свойство без проблем показывает результат. Но в Firefox почему-то показывает 0, если загнать в setTimeout(()=>{wrapper.offsetWidth},200), то без проблем отрабатывает и показывает ширину элемента. В чём может быть проблема?
|
|
12.04.2020, 22:45
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
AndrewKokorev,
возможно хром использует кеш, а вы грузите html или css.
|
|
13.04.2020, 18:08
|
|
Интересующийся
|
|
Регистрация: 25.02.2020
Сообщений: 19
|
|
|
Размер элемента динамический и постоянно у него разная ширина при загрузке. Потому кэш тут не при чём думаю.
|
|
13.04.2020, 20:05
|
 |
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,707
|
|
|
Вы хоть пример кода приведите.
Как он создается, где и когда ширина не берется?
|
|
14.04.2020, 14:05
|
|
Интересующийся
|
|
Регистрация: 25.02.2020
Сообщений: 19
|
|
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. |
|
14.04.2020, 14:36
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
AndrewKokorev,
Когда элемент скрыт, например, style.display none, тогда offsetWidth равно 0, здесь написано.
|
|
14.04.2020, 15:10
|
|
Интересующийся
|
|
Регистрация: 25.02.2020
Сообщений: 19
|
|
|
Элемент не скрыт. Просто такое ощущение чтоб в мозиле возможно код выполняется в то время когда еще не отработал CSS, но такого быть не должно, т.к. js подключен в конце документа. Проблема в том что в Chrome и Opera, у которых один движок всё работает норм, в Firefox и Edge появляется эта проблема что ширина на момент работы функции равна 0. И чтобы у элемента ширина была больше 0, нужно задать очень большую задержку минимум в 250 секунд
|
|
14.04.2020, 16:53
|
 |
Профессор
|
|
Регистрация: 08.11.2017
Сообщений: 642
|
|
|
|
|
14.04.2020, 18:50
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,707
|
|
|
Цитата:
|
|
но такого быть не должно, т.к. js подключен в конце документа.
|
Где именно в конце?
Код, который стоит в теле <body> </body>, выполняется сразу, не дожидаясь загрузки всего остального. Так, что CSS еще имеет право не примениться. Даже размещение элементов имело право не произойти, т.к. Дерево DOM построено не до конца.
Последний раз редактировалось voraa, 14.04.2020 в 18:54.
|
|
17.04.2020, 23:46
|
|
Интересующийся
|
|
Регистрация: 25.02.2020
Сообщений: 19
|
|
|
В общем сделал просто через async/await. JS подключен в конце в конце body. Всегда думал что js код выполняется после загрузки HTML и CSS , если ставить в конце body, а тут оказывается что даже дерево может даже до конца не сформироваться))Спасиб за пояснение
|
|
|
|
