[Webkit-unassigned] [Bug 280983] New: Adding a fade out animation to a popover that overlays a relative element hides it partially while fading out

Mon Oct 7 09:40:16 PDT 2024

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

            Bug ID: 280983
           Summary: Adding a fade out animation to a popover that overlays
                    a relative element hides it partially while fading out
           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: imbashenk at hotmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 472841

  --> https://bugs.webkit.org/attachment.cgi?id=472841&action=review

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.

-- 
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/20241007/e20fb156/attachment.htm>