Bug 280983

Summary:

Adding a fade out animation to a popover that overlays a relative element hides it partially while fading out

Product:

WebKit

Reporter:

Rogier de Ruijter <imbashenk>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

bfulgham, graouts, ntim, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
Shows the popover during the fade out animation	none

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.