284526 2024-12-12 06:19:27 -0800 [scroll-animations] https://scroll-driven-animations.style/demos/carousel-with-markers/css/ does not work 2026-01-12 09:09:55 -0800 1 1 1 Unclassified WebKit Animations WebKit Nightly Build Unspecified Unspecified NEW InRadar P2 Normal --- 284525 1 graouts webkit-unassigned graouts webkit-bug-importer oldest_to_newest 2081122 0 graouts 2024-12-12 06:19:27 -0800 The demos https://scroll-driven-animations.style/demos/carousel-with-markers/css/ does not work perfectly: the figurines are too small and dots are all pink on the last slide. 2081123 1 webkit-bug-importer 2024-12-12 06:19:44 -0800 <rdar://problem/141355957> 2113876 2 graouts 2025-04-29 06:06:48 -0700 There are two visual issues here. The dots are all using an animation associated with a scroll timeline and with a range to match a subsection of the scrolling container. When we get to the end, I think we end up hitting the "at progress timeline boundary" behavior specified in https://drafts.csswg.org/web-animations-2/#at-progress-timeline-boundary and make all animations have a progress of 1. I'm not sure whether that is the correct behavior. For the figurings sizing, that appears to be a sizing/layout issue that we need to split off in a separate bug. 2113892 3 graouts 2025-04-29 07:16:27 -0700 So I think we have the correct behavior here with regards to the at-progress timeline boundary, at least the way it's currently specified. That said, I don't think this is desirable, so I filed https://github.com/w3c/csswg-drafts/issues/12134. 2113922 4 475077 graouts 2025-04-29 09:02:03 -0700 Created attachment 475077 Standalone version of the demo 475077 2025-04-29 09:02:03 -0700 2025-04-29 09:02:03 -0700 Standalone version of the demo bug-284526.html text/html 5716 graouts PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+Cgk8bWV0YSBjaGFyc2V0PSJV VEYtOCI+Cgk8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRo LCBpbml0aWFsLXNjYWxlPTEuMCI+Cgk8dGl0bGU+U2Nyb2xsLWRyaXZlbiBBbmltYXRpb25zOiBD YXJvdXNlbCB3aXRoIEluZGljYXRvcnM8L3RpdGxlPgoJPHN0eWxlPgoKICAgICAgICBAbGF5ZXIg ZGVtbyB7CiAgICAgICAgCUBsYXllciByZXNldCB7CiAgICAgICAgCQkqLAogICAgICAgIAkJKjph ZnRlciwKICAgICAgICAJCSo6YmVmb3JlIHsKICAgICAgICAJCQlib3gtc2l6aW5nOiBib3JkZXIt Ym94OwogICAgICAgIAkJfQoKICAgICAgICAJCW1haW4gKiB7CiAgICAgICAgCQkJbWFyZ2luOiAw OwogICAgICAgIAkJCXBhZGRpbmc6IDA7CiAgICAgICAgCQl9CgogICAgICAgIAkJbWFpbiB1bFtj bGFzc10gewogICAgICAgIAkJCWxpc3Qtc3R5bGU6IG5vbmU7CiAgICAgICAgCQl9CgogICAgICAg IAkJbWFpbiBsYWJlbCB7CiAgICAgICAgCQkJY3Vyc29yOiBwb2ludGVyOwogICAgICAgIAkJCW1h eC13aWR0aDogbWF4LWNvbnRlbnQ7CiAgICAgICAgCQkJdXNlci1zZWxlY3Q6IG5vbmU7CiAgICAg ICAgCQl9CiAgICAgICAgCX0KCiAgICAgICAgCUBsYXllciBiYXNlbGF5b3V0IHsKICAgICAgICAJ CWh0bWwgewogICAgICAgIAkJCW1hcmdpbjogYXV0bzsKICAgICAgICAJCQlmb250LXNpemU6IDEu MjVlbTsKICAgICAgICAJCQloZWlnaHQ6IDEwMCU7CiAgICAgICAgCQkJbWluLWhlaWdodDogMTAw ZHZoOwogICAgICAgIAkJCWJhY2tncm91bmQ6IHdoaXRlOwogICAgICAgIAkJfQoKICAgICAgICAJ CWJvZHkgewogICAgICAgIAkJCXdpZHRoOiAxMDAlOwogICAgICAgIAkJCW1heC13aWR0aDogNzVj aDsKICAgICAgICAJCQltYXJnaW46IDAgYXV0bzsKICAgICAgICAJCQlwYWRkaW5nOiAyZW07CiAg ICAgICAgCQkJaGVpZ2h0OiAxMDAlOwogICAgICAgIAkJCWRpc3BsYXk6IGdyaWQ7CiAgICAgICAg CQkJcGxhY2UtY29udGVudDogY2VudGVyOwogICAgICAgIAkJfQogICAgICAgIAl9CgogICAgICAg IAlAbGF5ZXIgY29tcG9uZW50cyB7CiAgICAgICAgCQlAbGF5ZXIgY2Fyb3VzZWwgewogICAgICAg IAkJCS8qIENhcm91c2VsIENvbXBvbmVudCAqLwogICAgICAgIAkJCVtkYXRhLWNvbXBvbmVudD0i Y2Fyb3VzZWwiXSB7CiAgICAgICAgCQkJCWJvcmRlci1yYWRpdXM6IDAuNWVtOwogICAgICAgIAkJ CQlib3JkZXI6IDAuMjVlbSBzb2xpZCAjNjMwMGZmOwogICAgICAgIAkJCQlwb3NpdGlvbjogcmVs YXRpdmU7CiAgICAgICAgCQkJCW1hcmdpbjogMCBhdXRvIDEwdmg7CiAgICAgICAgCQkJCWJhY2tn cm91bmQ6IHdoaXRlOwogICAgICAgIAkJCQloZWlnaHQ6IDcwdm1pbjsKICAgICAgICAJCQkJd2lk dGg6IDcwdm1pbjsKICAgICAgICAJCQkJb3ZlcmZsb3c6IGhpZGRlbjsKCiAgICAgICAgCQkJCSY6 aG92ZXIsCiAgICAgICAgCQkJCSY6aGFzKC5lbnRyaWVzOmZvY3VzKSB7CiAgICAgICAgCQkJCQli b3JkZXItY29sb3I6ICNmZjAwZmE7CiAgICAgICAgCQkJCX0KCiAgICAgICAgCQkJCS5lbnRyaWVz IHsKICAgICAgICAJCQkJCWRpc3BsYXk6IGZsZXg7CiAgICAgICAgCQkJCQl3aWR0aDogMTAwJTsK ICAgICAgICAJCQkJCWhlaWdodDogMTAwJTsKICAgICAgICAJCQkJCWZsZXgtZGlyZWN0aW9uOiBy b3c7CgogICAgICAgIAkJCQkJb3ZlcmZsb3cteDogc2Nyb2xsOwogICAgICAgIAkJCQkJc2Nyb2xs LXNuYXAtdHlwZTogeCBtYW5kYXRvcnk7CiAgICAgICAgCQkJCQlzY3JvbGxiYXItd2lkdGg6IG5v bmU7CiAgICAgICAgCQkJCQlzY3JvbGwtYmVoYXZpb3I6IHNtb290aDsKCiAgICAgICAgCQkJCQlv dmVyc2Nyb2xsLWJlaGF2aW9yOiBjb250YWluOwoKICAgICAgICAJCQkJCSY6Zm9jdXMgewogICAg ICAgIAkJCQkJCW91dGxpbmU6IG5vbmU7CiAgICAgICAgCQkJCQl9CgogICAgICAgIAkJCQkJPiBs aSB7CiAgICAgICAgCQkJCQkJc2Nyb2xsLXNuYXAtYWxpZ246IGNlbnRlcjsKICAgICAgICAJCQkJ CQlmbGV4OiAxMDAlIDEgMDsKICAgICAgICAJCQkJCQlkaXNwbGF5OiBmbGV4OwogICAgICAgIAkJ CQkJCXBhZGRpbmc6IDFyZW0gMXJlbSA0cmVtIDFyZW07CgogICAgICAgIAkJCQkJCSYgYSB7CiAg ICAgICAgCQkJCQkJCWRpc3BsYXk6IGZsZXg7CiAgICAgICAgCQkJCQkJCWFsaWduLXNlbGY6IHN0 cmV0Y2g7CiAgICAgICAgCQkJCQkJfQoKICAgICAgICAJCQkJCQkmIGltZyB7CiAgICAgICAgCQkJ CQkJCWRpc3BsYXk6IGJsb2NrOwogICAgICAgIAkJCQkJCQl3aWR0aDogMTAwJTsKICAgICAgICAJ CQkJCQkJaGVpZ2h0OiBhdXRvOwogICAgICAgIAkJCQkJCQlvYmplY3QtZml0OiBjb250YWluOwog ICAgICAgIAkJCQkJCQlvYmplY3QtcG9zaXRpb246IDUwJSAxMDAlOwogICAgICAgIAkJCQkJCX0K ICAgICAgICAJCQkJCX0KICAgICAgICAJCQkJfQoKICAgICAgICAJCQkJLm1hcmtlcnMgewogICAg ICAgIAkJCQkJZGlzcGxheTogZmxleDsKICAgICAgICAJCQkJCWZsZXgtZGlyZWN0aW9uOiByb3c7 CiAgICAgICAgCQkJCQlnYXA6IDAuMjVlbTsKICAgICAgICAJCQkJCWZvbnQtc2l6ZTogMmVtOwoK ICAgICAgICAJCQkJCXBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAJCQkJCWJvdHRvbTogMS41 cmVtOwogICAgICAgIAkJCQkJbGVmdDogNTAlOwogICAgICAgIAkJCQkJdHJhbnNsYXRlOiAtNTAl IDA7CgogICAgICAgIAkJCQkJJiBsaSB7CiAgICAgICAgCQkJCQkJJjpudGgtY2hpbGQoMSkgewog ICAgICAgIAkJCQkJCQktLWk6IDE7CiAgICAgICAgCQkJCQkJfQogICAgICAgIAkJCQkJCSY6bnRo LWNoaWxkKDIpIHsKICAgICAgICAJCQkJCQkJLS1pOiAyOwogICAgICAgIAkJCQkJCX0KICAgICAg ICAJCQkJCQkmOm50aC1jaGlsZCgzKSB7CiAgICAgICAgCQkJCQkJCS0taTogMzsKICAgICAgICAJ CQkJCQl9CiAgICAgICAgCQkJCQkJJjpudGgtY2hpbGQoNCkgewogICAgICAgIAkJCQkJCQktLWk6 IDQ7CiAgICAgICAgCQkJCQkJfQogICAgICAgIAkJCQkJCSY6bnRoLWNoaWxkKDUpIHsKICAgICAg ICAJCQkJCQkJLS1pOiA1OwogICAgICAgIAkJCQkJCX0KICAgICAgICAJCQkJCX0KCiAgICAgICAg CQkJCQkmIGEgewogICAgICAgIAkJCQkJCWRpc3BsYXk6IGJsb2NrOwogICAgICAgIAkJCQkJCXdp ZHRoOiAwLjVlbTsKICAgICAgICAJCQkJCQlhc3BlY3QtcmF0aW86IDE7CiAgICAgICAgCQkJCQkJ YmFja2dyb3VuZDogIzYzMDBmZjsKICAgICAgICAJCQkJCQlib3JkZXItcmFkaXVzOiA1MCU7CiAg ICAgICAgCQkJCQl9CiAgICAgICAgCQkJCX0KICAgICAgICAJCQl9CiAgICAgICAgCQl9CiAgICAg ICAgCX0KCiAgICAgICAgCUBsYXllciB1dGlsaXRpZXMgewogICAgICAgIAkJLnNyLW9ubHkgewog ICAgICAgIAkJCXBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAJCQl3aWR0aDogMXB4OwogICAg ICAgIAkJCWhlaWdodDogMXB4OwogICAgICAgIAkJCXBhZGRpbmc6IDA7CiAgICAgICAgCQkJbWFy Z2luOiAtMXB4OwogICAgICAgIAkJCW92ZXJmbG93OiBoaWRkZW47CiAgICAgICAgCQkJY2xpcDog cmVjdCgwLCAwLCAwLCAwKTsKICAgICAgICAJCQl3aGl0ZS1zcGFjZTogbm93cmFwOwogICAgICAg IAkJCWJvcmRlci13aWR0aDogMDsKICAgICAgICAJCX0KICAgICAgICAJfQoKICAgICAgICB9CgoK CQlAa2V5ZnJhbWVzIGNvbG9yaXplLWRvdCB7CgkJCTAlLAoJCQkxMDAlIHsKCQkJCWJhY2tncm91 bmQ6ICNmZjAwZmE7CgkJCX0KCQl9CgoJCVtkYXRhLWNvbXBvbmVudD0iY2Fyb3VzZWwiXSB7CgkJ CXRpbWVsaW5lLXNjb3BlOiAtLWNhcm91c2VsOwoKCQkJLmVudHJpZXMgewoJCQkJc2Nyb2xsLXRp bWVsaW5lOiAtLWNhcm91c2VsIHg7CgkJCX0KCiAgICAgICAgICAgIC5tYXJrZXJzIGEgewogICAg ICAgICAgICAgICAgYW5pbWF0aW9uOiBjb2xvcml6ZS1kb3QgbGluZWFyOwogICAgICAgICAgICAg ICAgYW5pbWF0aW9uLXRpbWVsaW5lOiAtLWNhcm91c2VsOwogICAgICAgICAgICAgICAgYW5pbWF0 aW9uLXJhbmdlOiBjYWxjKCh2YXIoLS1pKSAtIDEpICogMjAlKSBjYWxjKHZhcigtLWkpICogMjAl KTsKICAgICAgICAgICAgfQoJCX0KCgk8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgoJPG1haW4+CgkJ PGRpdiBkYXRhLWNvbXBvbmVudD0iY2Fyb3VzZWwiPgoJCQk8dWwgY2xhc3M9ImVudHJpZXMiIHRh YmluZGV4PSIwIj4KCQkJCTxsaT48YSBuYW1lPSJjYXJvdXNlbF8wMSI+PGltZyBzcmM9Imh0dHBz Oi8vc2Nyb2xsLWRyaXZlbi1hbmltYXRpb25zLnN0eWxlL2RlbW9zL2Nhcm91c2VsLXdpdGgtbWFy a2Vycy9zaGFyZWQvaW1nL21hdHJvc2hrYS0wMS5zdmciIGFsdD0iIiB0aXRsZT0iIiB3aWR0aD0i MjIyIiBoZWlnaHQ9IjE4NCIgZHJhZ2dhYmxlPSJmYWxzZSI+PC9hPjwvbGk+CgkJCQk8bGk+PGEg bmFtZT0iY2Fyb3VzZWxfMDIiPjxpbWcgc3JjPSJodHRwczovL3Njcm9sbC1kcml2ZW4tYW5pbWF0 aW9ucy5zdHlsZS9kZW1vcy9jYXJvdXNlbC13aXRoLW1hcmtlcnMvc2hhcmVkL2ltZy9tYXRyb3No a2EtMDIuc3ZnIiBhbHQ9IiIgdGl0bGU9IiIgd2lkdGg9IjIyMiIgaGVpZ2h0PSIxODQiIGRyYWdn YWJsZT0iZmFsc2UiPjwvYT48L2xpPgoJCQkJPGxpPjxhIG5hbWU9ImNhcm91c2VsXzAzIj48aW1n IHNyYz0iaHR0cHM6Ly9zY3JvbGwtZHJpdmVuLWFuaW1hdGlvbnMuc3R5bGUvZGVtb3MvY2Fyb3Vz ZWwtd2l0aC1tYXJrZXJzL3NoYXJlZC9pbWcvbWF0cm9zaGthLTAzLnN2ZyIgYWx0PSIiIHRpdGxl PSIiIHdpZHRoPSIyMjIiIGhlaWdodD0iMTg0IiBkcmFnZ2FibGU9ImZhbHNlIj48L2E+PC9saT4K CQkJCTxsaT48YSBuYW1lPSJjYXJvdXNlbF8wNCI+PGltZyBzcmM9Imh0dHBzOi8vc2Nyb2xsLWRy aXZlbi1hbmltYXRpb25zLnN0eWxlL2RlbW9zL2Nhcm91c2VsLXdpdGgtbWFya2Vycy9zaGFyZWQv aW1nL21hdHJvc2hrYS0wNC5zdmciIGFsdD0iIiB0aXRsZT0iIiB3aWR0aD0iMjIyIiBoZWlnaHQ9 IjE4NCIgZHJhZ2dhYmxlPSJmYWxzZSI+PC9hPjwvbGk+CgkJCQk8bGk+PGEgbmFtZT0iY2Fyb3Vz ZWxfMDUiPjxpbWcgc3JjPSJodHRwczovL3Njcm9sbC1kcml2ZW4tYW5pbWF0aW9ucy5zdHlsZS9k ZW1vcy9jYXJvdXNlbC13aXRoLW1hcmtlcnMvc2hhcmVkL2ltZy9tYXRyb3Noa2EtMDUuc3ZnIiBh bHQ9IiIgdGl0bGU9IiIgd2lkdGg9IjIyMiIgaGVpZ2h0PSIxODQiIGRyYWdnYWJsZT0iZmFsc2Ui PjwvYT48L2xpPgoJCQk8L3VsPgoJCQk8dWwgY2xhc3M9Im1hcmtlcnMiPgoJCQkJPGxpPjxhIGhy ZWY9IiNjYXJvdXNlbF8wMSI+PHNwYW4gY2xhc3M9InNyLW9ubHkiPlBob3RvIDE8L3NwYW4+PC9h PjwvbGk+CgkJCQk8bGk+PGEgaHJlZj0iI2Nhcm91c2VsXzAyIj48c3BhbiBjbGFzcz0ic3Itb25s eSI+UGhvdG8gMjwvc3Bhbj48L2E+PC9saT4KCQkJCTxsaT48YSBocmVmPSIjY2Fyb3VzZWxfMDMi PjxzcGFuIGNsYXNzPSJzci1vbmx5Ij5QaG90byAzPC9zcGFuPjwvYT48L2xpPgoJCQkJPGxpPjxh IGhyZWY9IiNjYXJvdXNlbF8wNCI+PHNwYW4gY2xhc3M9InNyLW9ubHkiPlBob3RvIDQ8L3NwYW4+ PC9hPjwvbGk+CgkJCQk8bGk+PGEgaHJlZj0iI2Nhcm91c2VsXzA1Ij48c3BhbiBjbGFzcz0ic3It b25seSI+UGhvdG8gNTwvc3Bhbj48L2E+PC9saT4KCQkJPC91bD4KCQk8L2Rpdj4KCTwvbWFpbj4K PC9ib2R5Pgo8L2h0bWw+Cg==