Bug 294902 – mada.com.sa: broken animation for "timeline" compared to Chrome

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Animations

[Antoine Quint]

Steps to reproduce:

1. Go to - https://www.mada.com.sa
2. Scroll till you see timeline of 1993 — 2022
3. Notice the animation + scrollbar

This should not cause the page to jump or it shouldn’t be this jumpy (page jump is more visible, if you are on end of page - footer area)

[Antoine Quint]

rdar://145878894

[Antoine Quint]

Created attachment 475639 [details]
Reduced test case

The content can be reduced to something as simple as:

```
<style>

h1 {
    margin-top: 0;
    animation: shrink 1s linear;
}

@keyframes shrink {
    from { font-size: 100px }
}
        
</style>
<h1>Hello World!</h1>
```

Somehow the `margin-top` style seems to be ignored and the element top left corner moves as the `font-size` animates. This does not occur in Chrome and Firefox.

[Antoine Quint]

Note that <h1> has the following style declared in the UA stylesheet:

```
h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    font-weight: bold;
}
```

It appears to me that there may be a cascade issue here and that the margin value used here is the `rem` value  specified in the UA stylesheet instead of the `0` value set in the page's `h1` rule.

[Antoine Quint]

Huh, this does not reproduce in STP 122!

[Antoine Quint]

Sorry, meant to say it reproduces in STP 122 but not on a ToT build. So this appears to have been fixed recently, will find the exact change that fixed this.

[Antoine Quint]

This progressed with 296304@main, the fix for bug 284527.

*** This bug has been marked as a duplicate of bug 284527 ***