Investigating.

Repro works as indicated. Still digging to try to determine root cause.

Here's a minimal repro that doesn't use <details>.

"""
<button onclick="buttonclicked()">Button</button>                                  
 <iframe src="https://docs.google.com/document/d/1Rstmzvo_x5-_bqaydPq4K4XzG3x2iX00vjm6uIrkT1E/preview" width="1200" height="500"
     id="iframe1" style="display:none"></iframe>                                   
                                                                                                                                                                                                                                                   
<script>                                                                           
function buttonclicked() {                                                         
    if (document.getElementById("iframe1").style.display != 'none' ) {             
      document.getElementById("iframe1").style.display = 'none';                   
    } else {                                                                       
      document.getElementById("iframe1").style.display = 'block';                  
    }                                                                              
}                                                                                  
</script>       
"""

Note that this issue doesn't reproduce with other sites. I tried http://perdu.com, https://wikipedia.org, and a publicly viewable google sheet.

This suggests that there's some odd interaction happening with the JS on google docs. Still investigating.

The problem is that there's script which sets the size of some internal elements to the size of the document, which is 0px, and the size of the internal elements is never reset to the appropriate values.

This is likely related to https://bugs.chromium.org/p/chromium/issues/detail?id=795661#c18. 

Continuing to investigate.

Hm. Not exactly sure how RV-G is being applied. Not sure this needs to be there but oh well.

The root cause of the problem is that Docs computes some scaling code on document load and caches the results. The logic looks like this:

"""
    var hiddenEl = ...
        style: "position: absolute; top: -50000px; width: 1in; height: 1in"
    document.body.appendChild(hiddenEl);
    var ppp = hiddenEl.offsetHeight / 72.0;};
"""

hiddenEl.offsetHeight is incorrectly returning 0. 

The implementation of offsetHeight in Chrome relies on the existence of a layout object:

"""
int Element::OffsetHeight() {
  GetDocument().EnsurePaintLocationDataValidForNode(this);
  if (LayoutBoxModelObject* layout_object = GetLayoutBoxModelObject())
    return AdjustForAbsoluteZoom::AdjustLayoutUnit(
               LayoutUnit(
                   layout_object->PixelSnappedOffsetHeight(OffsetParent())),
               layout_object->StyleRef())
        .Round();
  return 0;
}
"""

Tomorrow I'll audit all callers of GetLayoutBoxModelObject() and see what else needs to be fixed.

+ eae

There's no easy way to fix this problem. Computing offset* requires the layout tree to be constructed. 

As noted in https://github.com/whatwg/html/issues/1813, "Gecko and Edge also do not perform box construction or layout inside display:none iframes [2]." This means that Chrome now matches the behavior of Firefox and Edge.

My example in c#4 works in Safari, and Chrome 64 and older. It does not work in Firefox, Edge, or Chrome 65 or newer. 
The example in c#0 breaks in Chrome 65+ because <details> closed tags are implemented via display:none. It also does not work in Firefox. It works in Edge, but only because Edge appears to not respect the closed by default tag. 

I agree with #10 and I think this is WontFix, given that:

- we are matching Firefox and Edge behavior
- this isn't causing significant breakage on live sites
- there is a straightforward fix on the Docs side (listen to window.onresize to update cached layout state, as in  issue 795661 )