offsetWidth and offsetHeight are always 0 for elements with "display: inline" that contain block elements
Reported by
bsiegm...@salesforce.com,
Aug 15
|
|||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36 Steps to reproduce the problem: 1. Have a span or other element styled as "display: inline" 2. Have a div or other element styled as "display: block" inside 3. log offsetWidth and offsetHeight of that element https://jsfiddle.net/bf9pqjaz/15/ What is the expected behavior? offsetWidth and offsetHeight should return the size of the visual box including all borders. The same way it does for elements with "dispay: inline" that contain just text. What went wrong? offsetWidth and offsetHeight both are 0. Did this work before? N/A Chrome version: 68.0.3440.106 Channel: stable OS Version: Ubuntu 16.04 Flash Version: Works properly in Firefox. I realize that block elements inside inline elements are not an intended use case. I came across this because custom components default to "display: inline" and am aware that I can fix the issue by making them "display: block" or "display: inline-block". I still think that an element with visible content, that is not overflowing, should have proper offsetWidth and offsetHeight. element.getBoundingClientRect() returns expected values.
,
Aug 15
,
Aug 15
This scenario creates anonymous boxes wrapping the content [1] and the span you are querying the size of corresponds to a box that has zero size. 1: https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model#Example While perhaps a bit surprising this is working as intended.
,
Aug 16
I guess it's Firefox then, that behaves incorrectly. Thanks for the explanation. |
|||
►
Sign in to add a comment |
|||
Comment 1 by mknowles@chromium.org
, Aug 15