Box-sizing improperly sets dimensions when elements are width: 100% with display: none

[r4j4h]

This is related to a common JS problem, where an element's dimensions are un-fetchable while it is detached from the DOM from display: none or similar.

In our case, inputs with width: 100% get a width of practically zero as the parent container is display:none when the shim executes on page load. If the page resizes, or otherwise triggers the box-sizing.htc shim after being shown (when its width appears to be around zero), it pops into its normal place fine. If we have the element invisible but still in flow on page load, it works fine when eventually shown, but ideally we don't want the element in the flow.

I am honestly not sure of the best solution here, as AFAIK the dimension data is simply unavailable, but I thought I would start an issue so that others can be aware of this potential gotchya. It may very well be that it is outside of the shim's control and such DOM's or procedures must be changed instead.

This behavior does not occur in IE8+, Chrome, FF or Safari - it appears to be related entirely to the dimensions.

[markweston]

Hi @r4j4h

I have a similar issue. I've been using the polyfill on a few sites, but recently I've had issues where elements change from 'display: none' to 'display: block'.

One example is a list containing form elements. Some list elements are hidden, but show when a certain form element is selected. The hidden list elements don't seem to get the correct height even though the children of the list element seem to have a height. It's as if the polyfill doesn't correctly traverse the hidden elements children to properly assign it's height.

@Schepp Are you aware of this issue?