[Webkit-unassigned] [Bug 242513] New: Animation doesn't play with grid and position absolute

Fri Jul 8 09:03:51 PDT 2022

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

            Bug ID: 242513
           Summary: Animation doesn't play with grid and position absolute
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: pierre.de-soyres at clever-cloud.com

Animation doesn't play when the following conditions are met:

- container uses display: grid
- container uses position: relative
- element to animate uses position: absolute
- element to animate doesn't start on the first grid column (grid-column-start: 2) 

code snippet for reproducing issue:

```html
<!doctype html>
<html lang="en">
<head>
  <style>
    .main {
      height: 100px;
      background-color: #cccccc;
      display: grid;
      grid-template-columns: auto 1fr auto;
      overflow: hidden;
      position: relative;
    }

    .progress-bar {
      bottom: 0;
      grid-column-start: 2;
      height: 20px;
      position: absolute;
      width: 100%;
    }

    .progress-bar-track {
      background-color: red;
      height: 100%;
    }

    .progress {
      animation: progress 3s linear forwards;
    }

    @keyframes progress {
      0% {
        width: 100%;
      }
      100% {
        width: 0;
      }
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="icon">icon</div>
    <div class="content">content</div>
    <div class="close">X</div>

    <div class="progress-bar">
      <div class="progress-bar-track progress"></div>
    </div>
  </div>
</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/20220708/f9760734/attachment.htm>