[Webkit-unassigned] [Bug 177088] New: Elements after <summary> with max-width using rem units get really narrow

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=177088

            Bug ID: 177088
           Summary: Elements after <summary> with max-width using rem
                    units get really narrow
           Product: WebKit
           Version: Safari 10
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: marek.aug at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 321105

  --> https://bugs.webkit.org/attachment.cgi?id=321105&action=review

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>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20170918/28d311cc/attachment-0001.html>