RESOLVED DUPLICATE of bug 276727 280983
Adding a fade out animation to a popover that overlays a relative element hides it partially while fading out 
https://bugs.webkit.org/show_bug.cgi?id=280983
Summary Adding a fade out animation to a popover that overlays a relative element hid...
Rogier de Ruijter
Reported 2024-10-07 09:40:16 PDT
Created attachment 472841 [details] Shows the popover during the fade out animation Steps to reproduce: - Show a popover - Position it above a relatively positioned element in a way that the popover and relative element partially overlap - Hide popover with a fade out animation Result: Popover is partially hidden during the fade out. Code to reproduce: ``` <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Fade out image partially hidden</title> <meta name="viewport" content="width=device-width,initial-scale=1" /> </head> <body> <div class="popover-element" popover></div> <div class="element"></div> </body> <style> html, body { height: 100%; } .element { width: 300px; height: 300px; position: relative; left: 300px; top: 400px; background-color: hotpink; } .popover-element { width: 100px; height: 100px; position: absolute; left: 350px; top: 350px; background-color: lightblue; margin: 0; opacity: 0; transition: opacity 200ms ease-in-out, overlay 200ms ease-in-out allow-discrete, display 200ms ease-in-out allow-discrete; } .popover-element:popover-open { opacity: 1; } </style> <script> const popoverElement = document.querySelector(".popover-element"); popoverElement.showPopover(); </script> </html> ``` Note: If you change the DOM order, therefore the popover comes after the div with class="element" then this bug does not happen.
Attachments
Shows the popover during the fade out animation (18.12 KB, video/quicktime)
2024-10-07 09:40 PDT, Rogier de Ruijter 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2024-10-14 09:41:16 PDT
<rdar://problem/137882480>
Tim Nguyen (:ntim)
Comment 2 2024-10-14 11:06:27 PDT
*** This bug has been marked as a duplicate of bug 276727 ***
Note You need to log in before you can comment on or make changes to this bug.