294902 2025-06-24 07:12:15 -0700 mada.com.sa: broken animation for "timeline" compared to Chrome 2025-06-24 07:51:07 -0700 1 1 1 Unclassified WebKit Animations WebKit Nightly Build Unspecified Unspecified RESOLVED DUPLICATE 284527 InRadar P2 Normal --- 1 graouts webkit-unassigned graouts koivisto webkit-bug-importer zalan oldest_to_newest 2125472 0 graouts 2025-06-24 07:12:15 -0700 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) 2125473 1 graouts 2025-06-24 07:12:24 -0700 rdar://145878894 2125477 2 475639 graouts 2025-06-24 07:18:01 -0700 Created attachment 475639 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. 2125481 3 graouts 2025-06-24 07:24:35 -0700 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. 2125485 4 graouts 2025-06-24 07:44:19 -0700 Huh, this does not reproduce in STP 122! 2125486 5 graouts 2025-06-24 07:44:55 -0700 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. 2125487 6 graouts 2025-06-24 07:51:07 -0700 This progressed with 296304@main, the fix for bug 284527. *** This bug has been marked as a duplicate of bug 284527 *** 475639 2025-06-24 07:18:01 -0700 2025-06-24 07:37:06 -0700 Reduced test case bug-293731.html text/html 1171 graouts PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDxzdHlsZT4KCiAgICAgICAgYm9keSB7 CiAgICAgICAgICAgIG1hcmdpbjogMDsKICAgICAgICB9CgogICAgICAgICNyb290IHsKICAgICAg ICAgICAgd2lkdGg6IDgwMHB4OwogICAgICAgICAgICBoZWlnaHQ6IDIwMHB4OwogICAgICAgICAg ICBvdmVyZmxvdzogaGlkZGVuOwogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7CiAg ICAgICAgfQoKICAgICAgICBAcHJvcGVydHkgLS12YXJpYWJsZS10cmFuc2xhdGUteCB7CiAgICAg ICAgICAgIHN5bnRheDogIjxsZW5ndGgtcGVyY2VudGFnZT4iOwogICAgICAgICAgICBpbmhlcml0 czogZmFsc2U7CiAgICAgICAgICAgIGluaXRpYWwtdmFsdWU6IDBweDsKICAgICAgICB9CgogICAg ICAgIEBrZXlmcmFtZXMgbW92ZSB7CiAgICAgICAgICAgIGZyb20sIHRvIHsgLS12YXJpYWJsZS10 cmFuc2xhdGUteDogLTgwMHB4IH0KICAgICAgICB9CgogICAgICAgICNjb250YWluZXIgewogICAg ICAgICAgICB3aWR0aDogMjA0OXB4OyAvKiBpc3N1ZSBkaXNhcHBlYXJzIGF0IDIwNDhweCwgd2hp Y2ggaXMgdGlsaW5nIHRocmVzaG9sZCAqLwogICAgICAgICAgICBoZWlnaHQ6IDEwMCU7CiAgICAg ICAgICAgIGJhY2tncm91bmQtY29sb3I6IHJlZDsKCiAgICAgICAgICAgIHRyYW5zZm9ybTogdHJh bnNsYXRlWCh2YXIoLS12YXJpYWJsZS10cmFuc2xhdGUteCkpOwogICAgICAgICAgICB3aWxsLWNo YW5nZTogdHJhbnNmb3JtOyAvKiB0aGlzIGJ1ZyBvbmx5IGhhcHBlbnMgd2hlbiB0aGUgY29udGFp bmVyIGlzIGNvbXBvc2l0ZWQgKi8KICAgICAgICAgICAgYW5pbWF0aW9uOiBtb3ZlIDEwMDBzOwog ICAgICAgIH0KCiAgICAgICAgI2NvbnRlbnQgewogICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1 dGU7CiAgICAgICAgICAgIHdpZHRoOiAxMDAlOwogICAgICAgICAgICBoZWlnaHQ6IDEwMCU7CiAg ICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IGdyZWVuOwogICAgICAgIH0KCiAgICA8L3N0eWxl Pgo8L2hlYWQ+Cjxib2R5PgogICAgPGRpdiBpZD0icm9vdCI+CiAgICAgICAgPGRpdiBpZD0iY29u dGFpbmVyIj4KICAgICAgICAgICAgPGRpdiBpZD0iY29udGVudCI+PC9kaXY+CiAgICAgICAgPC9k aXY+CiAgICA8L2Rpdj4KPC9ib2R5Pgo8L2h0bWw+Cg==