offsetWidth가 Chrome에서 CSS 애니메이션 블록에서 잘못된 너비를 반환합니다.

Question

웹 페이지에서 일종의 "뉴스 바"를 만들려고합니다. 바는 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'; } }

을 TOTALWIDTH 것은 때때로 첫 번째 반복에서 작동하지만 (36 등) 완전히 잘못된 값을 반환 한 후. if '줄에 중단 점을 넣으면 디버거는 content.offsetWidth에 일관된 값 (예 : 4320)을 표시합니다.

어떻게 해결할 수 있습니까?

Answer 1

해결책을 찾았습니다. 콘텐츠를 "인라인 블록"으로 설정해야합니다. 내용 표시가 "블록"으로 설정된 경우 해당 offsetWidth는 CSS 애니메이션에 따라 다릅니다.