Bug 285534 – Sizing and positioning issues when popover changes CSS position upon opening

• Component: CSS
• Status: RESOLVED FIXED

[Luke Warlow]

Load: https://jsfiddle.net/5xfbk9ds/

In Chromium and Firefox when you click the toggle button the popover correctly moves to the center of the screen. In Safari it incorrectly moves to the top left corner of the window.

If you resize the window while the popover is open it will correctly move to the center of the screen but this will break again next time you try. Moving the whole window to a new display while the popover is open will again temporarily fix the positioning but this time it will break the sizing of the parent span element.

[Radar WebKit Bug Importer]

<rdar://problem/142491219>

[alan]

The popover is still dirty after layout (assert in debug). so essentially we don't get to the popover renderer during layout -> geometry becomes state.

(B)lock/(I)nline Box/(A)tomic inline, (A)bsolute/Fi(X)ed/(R)elative/Stic(K)y, (F)loating, (O)verflow clip, Anon(Y)mous, (G)enerated, has(L)ayer, hasLayer(S)crollableArea, (C)omposited, Content-visibility:(H)idden/(A)uto, (S)kipped content, (+)Dirty style, (+)Dirty layout
B---YGLS--- --  RenderView at (0,0) size 456x672 renderer (0x1440080b0) layout box (0x0)
B-----LS--- --    HTML RenderBlock at (0,0) size 456x672 renderer (0x144015600) layout box (0x0) node (0x144040e10)
B---------- --      BODY RenderBody at (8,8) size 440x656 renderer (0x1440159b0) layout box (0x1440424c0) node (0x1440150d0) (layout overflow 0,0 440x656) (visual overflow -6,0 446x656)
A---------- --        BUTTON RenderButton at (0,13) size 51.27x18 renderer (0x144041850) layout box (0x144042590) node (0x1440407f0) (layout overflow 2,0 47.27x18) (visual overflow -6,-4 62x27)
B---YG----- --          RenderBlock at (8,2) size 35.27x13 renderer (0x144041bc0) layout box (0x1440427f0)
I---------- --            #text RenderText renderer (0x144041af0) layout box (0x144043140) node (0x144041090) length->(6) "Toggle"
I---------- --        #text RenderText renderer (0x144041d30) layout box (0x144042660) node (0x144041110) length->(2) "\n\n"
A---------- --        SPAN RenderBlock at (55.27,0) size 80.89x42 renderer (0x144041e00) layout box (0x144042720) node (0x144040ea0)
BX-O--LS--- -+*         DIV RenderBlock at (5,5) size 70.89x32 renderer (0x144041f70) layout box (0x144043b20) node (0x144041210) layout->[self][normal child]
I---------- -+            #text RenderText renderer (0x144042320) layout box (0x144043cc0) node (0x144041430) length->(8) "Contents" layout->[self]
BX--YGL---- --    RenderBlock (::backdrop) at (0,0) size 456x672 renderer (0x1440477a0) layout box (0x0)

[alan]

Created attachment 473842 [details]
Patch

[Antti Koivisto]

Comment on attachment 473842 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=473842&action=review

> COMMIT_MESSAGE:1
> +Sizing and positioning issues when popver changes CSS position upon opening 

popver

[alan]

Created attachment 473846 [details]
[fast-cq]Patch

[alan]

Created attachment 473847 [details]
[fast-cq]Patch

[EWS]

Committed 288665@main (4b91c7fe1375): <https://commits.webkit.org/288665@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 473847 [details].

[Simon Fraser (smfr)]

*** Bug 283598 has been marked as a duplicate of this bug. ***