[Webkit-unassigned] [Bug 273368] Unstoppable animation in popovers

Mon Apr 29 11:39:30 PDT 2024

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

--- Comment #3 from stevestasteislost at icloud.com ---
(In reply to Alexey Proskuryakov from comment #1)
> Thank you for the report! Would it be possible to attach a complete test
> case, so that we don't need to re-create it based on the partial description?

This time it was a simple task to cut down my problem-case:

```
<!DOCTYPE html>
<html>
<head>
        <style>
                body {
                        display: grid:
                        grid-template: "h" "m" "f";
                        > header { grid-area: h; }
                        > main { grid-area: m; }
                        > footer { grid-area: f; }
                }
                button[type=button] {
                        border: none; background: none; padding: 0;
                        font: inherit;
                        cursor: help;
                        animation: PopOver .5s infinite;
                        text-shadow: 1px 1px 2px rgb(200 60 60 / 0.85);
                }
                @keyframes PopOver {
                        33% { text-shadow: 10px 1px 2px rgb(200 60 60 / 0.5); }
                        67% { text-shadow: 10px 1px 2px rgb(60 200 60 / 0.5); }
                        100% { text-shadow: 10px 1px 2px rgb(60 60 200 / 0.5); }
                }
                [popover] {
                        top: 5vb; max-block-size: 50vb;
                        left: 5vi; max-inline-size: 50vi;
                        block-size: 0;
                        overflow: hidden auto;
                        background-color: ivory;
                        box-shadow: 3pt 3pt 2pt 2pt rgb(0 0 0 / 0.5), 5pt 5pt 3pt 1pt rgb(0 0 200 / 0.25);
                }
                aside[popover] { min-inline-size: 5cm; min-block-size: 5cm; }
                article {
                        padding-inline: 2ch;
                        padding-block: 0.25lh;
                }
                aside {
                        font-size: 300%;
                }
        </style>
</head>
<body lang="de">
        <header><h1>Lorem ipsum?</h1></header>
        <article>
                <p>Lorem ipsum …
                        <button type=button popovertarget="q">L… what?
                                <aside popover id=q>
                                        <p>Lorem, non ipsum!</p>
                                </aside>
                        </button>
                …</p></article>
        <footer>Lorem ipsum!</footer>
</body>
</html>
```

-- 
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/20240429/6781895b/attachment.htm>