Bug 177088 – Elements after <summary> with max-width using rem units get really narrow

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Layout and Rendering

Created attachment 321105 [details]
Illustration of a bug. Both A and B should be equal width.

Reduced case:

    <style>
      div { outline: red solid thin; }
      .a { max-width: 60rem; }
      .b { max-width: 60rem; }
    </style>
    <div class=a>A</div>
    <details><summary></summary></details>
    <div class=b>B</div>

Also available at: https://codepen.io/marek-saji/full/WZrrVL

Expected to see both A and B with equal width, but B, if placed after <summary>, gets width of 60px.


Affected:

- Safari Version 10.1.2 (12603.3.8) on macOS Sierra
- Safari on iOS 10.3 on iPhone SE
- Safari on iOS 10.3 on iPad Air 2
- WebKit Nightly 10.1.2 (12603.3.8, r222141) on macOS Sierra
- Epiphany Version 3.24.1; WebKit 2.16.6 on Ubuntu 17.04
- Safari Version 10.1.2 (12603.3.8) on macOS Sierra (via browserstack.com)
- Safari on iOS 10.3 on iPhone 7 Plus emulator (via browserstack.com)


Unaffected:

- Safari Version 9.1.3 (11601.7.8) on macOS El Captain (via browserstack.com)
- Safari on iOS 9 on iPhone 6S Plus (via browserstack.com)
- Safari Technology Preview Version 9.1.1 (11601.6.15, 11602.1.27) on macOS El Captain (via browserstack.com)


Further observations:

- When I encountered this bug it only appeared when entering a page from different address -- after reloading or entering directly to page’s URL, bug disappeared. Reduced case does not work that way.

- Changing element’s styles programmatically fixes it’s width (e.g. setting element.setAttribute('style', ''), changing styles in Epiphany or even connecting to a iOS device to inspect it).

- Setting width has no effect, but min-width is respected.

- In reduced case above, if max-width of both .a and .b is defined together, bug does not occur.

- <details> and <summary> contents do not matter -- I’ve left them empty for brevity.


Other HTML configurations:

1. B copied before <details> — Unaffected:

    <div class=a>A</div>
    <div class=b>B</div>
    <details>
    <summary>
    </summary>
    </details>
    <div class=b>B</div>

2. B copied inside <summary> — Unaffected:

    <div class=a>A</div>
    <details>
    <summary>
    <div class=b>B</div>
    </summary>
    </details>
    <div class=b>B</div>

3. B copied inside <details> — Affected:

    <div class=a>A</div>
    <details>
    <summary>
    </summary>
    <div class=b>B</div>
    </details>
    <div class=b>B</div>

4. Be copied inside <details>, open <details> — Unaffected:

    <div class=a>A</div>
    <details open>
    <summary>
    </summary>
    <div class=b>B</div>
    </details>
    <div class=b>B</div>

4. open <details> — Affected:

    <div class=a>A</div>
    <details open>
    <summary>
    </summary>
    </details>
    <div class=b>B</div>

[Ahmad Saleem]

I am unable to reproduce this bug using attached CodePen in Comment 0 and Safari 15.6 on macOS 12.5 is showing me both A & B <div> to be of equal lengths and it is not matching with attached bug screenshot. Safari 15.6 is matching with both Firefox Nightly 104 and Chrome Canary 106 in the attached CodePen. I think it got fixed along the way and can be marked as "RESOLVED CONFIGURATION CHANGED". Thanks!