Bug 222234

Summary: Incorrect layouting after toggling display style from flex
Product: WebKit Reporter: Artur Signell <artur>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, simon.fraser, svillar, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Initial render - correct
none
Second render - incorrect none

Artur Signell
Reported 2021-02-20 12:52:47 PST
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.
Attachments
Initial render - correct (18.77 KB, image/png)
2021-02-20 12:53 PST, Artur Signell 		no flags
Details
Second render - incorrect (11.84 KB, image/png)
2021-02-20 12:53 PST, Artur Signell 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Artur Signell
Comment 1 2021-02-20 12:53:16 PST
Created attachment 421104 [details] Initial render - correct
Artur Signell
Comment 2 2021-02-20 12:53:30 PST
Created attachment 421105 [details] Second render - incorrect
Radar WebKit Bug Importer
Comment 3 2021-02-27 12:53:14 PST
<rdar://problem/74829031>
Note You need to log in before you can comment on or make changes to this bug.