[Webkit-unassigned] [Bug 222234] New: Incorrect layouting after toggling display style from flex

Sat Feb 20 12:52:47 PST 2021

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

            Bug ID: 222234
           Summary: Incorrect layouting after toggling display style from
                    flex
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: artur at signell.net
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

With a suitable DOM tree consisting of mostly display:flex and relative height elements, toggling display to 'none' and back for a given element makes only a small part of the element visible again.

Test case:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      html {
        height: 100%;
      }

      body {
        height: 100%;
      }

      #target {
        background: lightblue;
        display: flex;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div style="display: flex; flex-direction: column; height: 20%">
      <div style="flex: 1; display: flex; flex-direction: column">
        <div style="flex: 1; width: 100%; display: Flex; flex-direction: column">
          <div id="target">Hello</div>
        </div>
      </div>
    </div>
    <button id="hideshow">Hide/show</button>
    <script>
      document.querySelector('#hideshow').addEventListener('click', () => {
        const s = document.querySelector('#target').style;
        if (s.display === '') {
          s.display = 'none';
        } else {
          s.display = '';
        }
      });
    </script>
  </body>
</html>

Live example at https://artur.app.fi/safari-layout-bug.html

Expected: 
Initial rendering and rendering after toggling the "target" element to display:'none' and back are the same

Actual:

Initial render is a 100% bar with "Hello" in the center
Second render is a ~ 40 px wide bar in the left edge. Wide enough to contain the text "Hello" if it would be aligned left.

-- 
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/20210220/9f4ff36f/attachment.htm>