offsetWidth возвращает неправильную ширину в анимированном блоке css в Chrome
Я пытаюсь сделать своего рода "панель новостей" на веб-странице. На панели используется CSS-анимация, и текстовое содержимое обновляется на каждой итерации с использованием ajax для извлечения данных из RSS-канала.
Моя проблема в том, что длина содержимого может варьироваться, поэтому я хочу установить размер шрифта, используемого для отображения текста, достаточно маленького, чтобы отобразить весь контент.
Затем я использую эту функцию для изменения размера текстового содержимого:
function resize(content /*content div*/, maxHeight/*bar height*/, maxWidth /*bar width*/) {
content.parentNode.style.fontSize = maxHeight + 'px';
var totalwidth = content.offsetWidth;
if (totalwidth > maxWidth) {
content.parentNode.style.fontSize = (maxHeight * maxWidth / totalwidth) + 'px';
}
}
Иногда он работает на первой итерации, но после возвращает абсолютно неправильные значения (например, 36) для totalWidth. Если я поставлю точку останова в строке if, отладчик отобразит связное значение (например, 4320) для content.offsetWidth.
Как я могу это исправить?
1 ответ
Я нашел решение. Я должен установить содержимое как "встроенный блок". Если отображение контента установлено как "блок", его offsetWidth варьируется в зависимости от анимации CSS.