258897 2023-07-05 12:20:41 -0700 [svg] Multiple fragments of animation drawn in parallel rather than start to end like Chrome & Firefox 2023-12-21 15:17:00 -0800 1 1 1 Unclassified WebKit SVG Safari Technology Preview Unspecified Unspecified RESOLVED MOVED https://bugs.webkit.org/show_bug.cgi?id=259415 https://codepen.io/justinresources/pen/ExOWzNv BrowserCompat, InRadar P2 Normal --- 1 ahmad.saleem792 webkit-unassigned 1wheel bfulgham dino graouts graouts sabouhallawa webkit-bug-importer zimmermann oldest_to_newest 1965181 0 ahmad.saleem792 2023-07-05 12:20:41 -0700 Hi Team, I came across following test case on StackOverlfow. Refer to URL field for test case. WebKit ToT & Safari 16.5.1 are drawing the graph with three fragments while Chrome and Firefox draw it as intended from start till finish. StackOverflow Post: https://stackoverflow.com/questions/76581192/svg-animation-bug-in-safari Just wanted to raise so we can track it. Thanks! 1966430 1 webkit-bug-importer 2023-07-12 12:21:17 -0700 <rdar://problem/112151478> 1966560 2 graouts 2023-07-13 01:48:42 -0700 Retitling to clarify this doesn't have anything to do with SVG Animations since CSS Animations are used here. However, my bet is that this is purely an SVG issue with how we compute stroke-dashoffset here, but it could technically be an issue with how we animate that property. 1966584 3 467031 graouts 2023-07-13 06:01:48 -0700 Created attachment 467031 Reduction 1966585 4 graouts 2023-07-13 06:02:38 -0700 This is strictly an SVG issue, see the reduction attached which just uses a static stroke-dashoffset value. I expect this is some odd interaction with the pathlength attribute. 1966586 5 ahmad.saleem792 2023-07-13 06:07:15 -0700 (In reply to Antoine Quint from comment #4) > This is strictly an SVG issue, see the reduction attached which just uses a > static stroke-dashoffset value. I expect this is some odd interaction with > the pathlength attribute. Thanks @Antoine, apologise, I didn't go much in details or investigate, I just thought to capture it and look into later. So appreciate your help on deep analysis. 1966604 6 graouts 2023-07-13 07:35:42 -0700 I'm starting to think this is a CG bug or limitation, as the issue goes away if I remove one of the draw commands, which makes the number of segments in PathStream::applySegments() go from 257 to 256 and magically everything is fine. 1966606 7 graouts 2023-07-13 07:37:01 -0700 Interestingly the MDN demo for pathLength doesn't render at all in Safari: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength. 1968877 8 simon.fraser 2023-07-31 10:23:43 -0700 *** Bug 259415 has been marked as a duplicate of this bug. *** 2001472 9 bfulgham 2023-12-21 15:17:00 -0800 The fix for this issue needs to be made outside of the WebKit Open Source project. Resolving as MOVED. This work is being tracked under <rdar://problem/113436247> 467031 2023-07-13 06:01:48 -0700 2023-07-13 06:01:48 -0700 Reduction bug-258897-svg-stroke-dashoffset.html text/html 5108 graouts PHN0eWxlPgoKcGF0aCB7CiAgICBzdHJva2U6IGJsYWNrOwogICAgZmlsbDogbm9uZTsKICAgIHN0 cm9rZS13aWR0aDogMjsKICAgIHN0cm9rZS1kYXNoYXJyYXk6IDE7CglzdHJva2UtZGFzaG9mZnNl dDogMC41OwogICAgYW5pbWF0aW9uOiBkcmF3IDFzOwp9Cgo8L3N0eWxlPgoKPHN2ZyB2ZXJzaW9u PSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0 dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI2NTUiIGhlaWdodD0iNDAwIj4KICAg IDxwYXRoIGQ9Ik0xLjA4NTIsMzkwLjkwMTMgTTEuMjg1MiwzOTEuMTAxMyBMMS4yODUyLDM5MS4x MDEzIEwxLjI4NTIsMzkxLjEwMTMgTDMuODYyOCwzOTEuMDczMSBMNi40MzMzLDM5MS4wMTY5IEw5 LjAwMzcsMzkxLjI0MiBMMTEuNTgxMywzOTAuNzYzNiBMMTQuMTUxOCwzOTAuNjUxIEwxNi43Mjk0 LDM5MC42MjI5IEwxOS4yOTk4LDM5MC4zOTc3IEwyMS44Nzc1LDM5MC4zNDE0IEwyNC40NDc5LDM5 MC4zNDE0IEwyNy4wMTgzLDM5MC4xNDQ0IEwyOS41OTYsMzg5LjY2NiBMMzIuMTY2NCwzODkuODA2 NyBMMzQuNzQ0LDM4OS44MzQ5IEwzNy4zMTQ1LDM4OS44MDY3IEwzOS44OTIxLDM4OS4yNDM5IEw0 Mi40NjI1LDM4OS4wMTg3IEw0NS4wMzMsMzg5LjA0NjkgTDQ3LjYxMDYsMzg4LjYyNDcgTDUwLjE4 MSwzODguNjI0NyBMNTIuNzU4NiwzODguODc4IEw1NS4zMjkxLDM4OC44NDk5IEw1Ny45MDY3LDM4 OC45MDYxIEw2MC40NzcxLDM4OC45MDYxIEw2My4wNDc2LDM4OS4xNTk0IEw2NS42MjUyLDM4OS4x MzEzIEw2OC4xOTU2LDM4OC43OTM2IEw3MC43NzMzLDM4OC40Mjc3IEw3My4zNDM3LDM4OC4zMTUx IEw3NS45MTQxLDM4OC4zOTk2IEw3OC40OTE4LDM4OC4xMTgxIEw4MS4wNjIyLDM4Ny45MjExIEw4 My42Mzk4LDM4Ny42Mzk3IEw4Ni4yMTAzLDM4Ny40MTQ2IEw4OC43ODc5LDM4Ny4zMDIgTDkxLjM1 ODMsMzg3LjMwMiBMOTMuOTI4OCwzODcuMzU4MyBMOTYuNTA2NCwzODcuNDE0NiBMOTkuMDc2OCwz ODcuMTYxMyBMMTAxLjY1NDQsMzg2LjY1NDcgTDEwNC4yMjQ5LDM4Ni4zNDUxIEwxMDYuODAyNSwz ODUuNzI2IEwxMDkuMzcyOSwzODUuNDcyNyBMMTExLjk0MzQsMzg1LjM2MDEgTDExNC41MjEsMzg0 LjkzOCBMMTE3LjA5MTQsMzg0LjUxNTkgTDExOS42NjkxLDM4NC4xNzgxIEwxMjIuMjM5NSwzODMu ODQwNCBMMTI0LjgxNzEsMzgzLjQ3NDYgTDEyNy4zODc2LDM4My4wODA2IEwxMjkuOTU4LDM4My4w ODA2IEwxMzIuNTM1NiwzODIuOTY4IEwxMzUuMTA2MSwzODIuMjkyNiBMMTM3LjY4MzcsMzgxLjg0 MjMgTDE0MC4yNTQxLDM4MS42MTcxIEwxNDIuODI0NiwzODAuOTY5OSBMMTQ1LjQwMjIsMzgwLjMy MjYgTDE0Ny45NzI2LDM3OS41NjI3IEwxNTAuNTUwMiwzNzguOTcxNyBMMTUzLjEyMDcsMzc4LjY5 MDMgTDE1NS42OTgzLDM3OC40MzcgTDE1OC4yNjg3LDM3OC41NDk2IEwxNjAuODM5MiwzNzguNjM0 IEwxNjMuNDE2OCwzNzguMDcxMSBMMTY1Ljk4NzIsMzc3LjU2NDYgTDE2OC41NjQ5LDM3Ni42MzU5 IEwxNzEuMTM1MywzNzUuOTYwNCBMMTczLjcxMjksMzc1LjU2NjQgTDE3Ni4yODM0LDM3NS41Mzgz IEwxNzguODUzOCwzNzQuMjcxOSBMMTgxLjQzMTQsMzczLjE3NDMgTDE4NC4wMDE5LDM3MS42NTQ2 IEwxODYuNTc5NSwzNzAuNzU0IEwxODkuMTQ5OSwzNjkuNjg0NiBMMTkxLjcyNzUsMzY4Ljc1NTkg TDE5NC4yOTgsMzY4Ljk1MjkgTDE5Ni44Njg0LDM2OS4xNzggTDE5OS40NDYsMzY5LjIwNjEgTDIw Mi4wMTY1LDM2OC43Mjc3IEwyMDQuNTk0MSwzNjguMzYxOSBMMjA3LjE2NDUsMzY3LjEyMzYgTDIw OS43MzUsMzY1Ljg4NTMgTDIxMi4zMTI2LDM2NC44MTU5IEwyMTQuODgzLDM2My4zODA2IEwyMTcu NDYwNywzNjIuODE3NyBMMjIwLjAzMTEsMzYxLjA0NDcgTDIyMi42MDg3LDM1OC41OTYzIEwyMjUu MTc5MiwzNTYuNzM4OSBMMjI3Ljc0OTYsMzU2LjYyNjMgTDIzMC4zMjcyLDM1NS43ODIgTDIzMi44 OTc3LDM1NC42MjgxIEwyMzUuNDc1MywzNTIuNDg5MyBMMjM4LjA0NTcsMzUyLjQwNDkgTDI0MC42 MjMzLDM1MS41MDQzIEwyNDMuMTkzOCwzNTEuMTEwMyBMMjQ1Ljc2NDIsMzUyLjI5MjMgTDI0OC4z NDE4LDM0OS44NDM5IEwyNTAuOTEyMywzNTAuMjA5NyBMMjUzLjQ4OTksMzQ5LjkwMDEgTDI1Ni4w NjAzLDM0OS4yODEgTDI1OC42MzgsMzUwLjYwMzcgTDI2MS4yMDg0LDM1NC4wMzcxIEwyNjMuNzc4 OCwzNTEuNzI5NCBMMjY2LjM1NjUsMzUzLjkyNDYgTDI2OC45MjY5LDM1NC4wOTM0IEwyNzEuNTA0 NSwzNTUuOTUwOSBMMjc0LjA3NSwzNTYuMjMyMyBMMjc2LjY0NTQsMzU2LjE0NzkgTDI3OS4yMjMs MzU2Ljk5MjEgTDI4MS43OTM1LDM1Ni42ODI2IEwyODQuMzcxMSwzNTQuOTM3NyBMMjg2Ljk0MTUs MzU0LjAwOSBMMjg5LjUxOTEsMzUyLjUxNzQgTDI5Mi4wODk2LDM1MC44MDA3IEwyOTQuNjYsMzUw LjI2NiBMMjk3LjIzNzYsMzQ5LjYxODcgTDI5OS44MDgxLDM0OC42MzM3IEwzMDIuMzg1NywzNDgu OTQzMyBMMzA0Ljk1NjEsMzQ3LjUzNjEgTDMwNy41MzM4LDM0Ni45NDUxIEwzMTAuMTA0MiwzNDYu MTg1MyBMMzEyLjY3NDYsMzQ1LjU5NDMgTDMxNS4yNTIzLDM0NS4xNzIxIEwzMTcuODIyNywzNDUu NTM4IEwzMjAuNDAwMywzNDQuNTgxMSBMMzIyLjk3MDgsMzQzLjk5MDEgTDMyNS41NDg0LDM0My4z OTkxIEwzMjguMTE4OCwzNDIuMDc2NCBMMzMwLjY4OTMsMzQwLjgzODEgTDMzMy4yNjY5LDM0MC41 Mjg2IEwzMzUuODM3MywzMzkuNzEyNCBMMzM4LjQxNDksMzM5LjQwMjkgTDM0MC45ODU0LDMzOS4x NDk2IEwzNDMuNTU1OCwzMzkuMTc3NyBMMzQ2LjEzMzQsMzM4LjIyMDkgTDM0OC43MDM5LDMzNy40 ODkxIEwzNTEuMjgxNSwzMzcuNDg5MSBMMzUzLjg1MTksMzM3LjI5MjEgTDM1Ni40Mjk2LDMzNy4x Nzk2IEwzNTksMzM1Ljk5NzYgTDM2MS41NzA0LDMzMy43NzQzIEwzNjQuMTQ4MSwzMzMuMjM5NiBM MzY2LjcxODUsMzMyLjA1NzYgTDM2OS4yOTYxLDMyOS4yNDMzIEwzNzEuODY2NiwzMjcuNTU0NyBM Mzc0LjQ0NDIsMzI0Ljc5NjcgTDM3Ny4wMTQ2LDMyMy4yNDg5IEwzNzkuNTg1MSwzMjIuNDMyNyBM MzgyLjE2MjcsMzIwLjI5MzkgTDM4NC43MzMxLDMxNy4wNTc0IEwzODcuMzEwNywzMTUuNDgxNCBM Mzg5Ljg4MTIsMzEyLjk0ODYgTDM5Mi40NTE2LDMxMS41OTc3IEwzOTUuMDI5MiwzMDkuNjI3NyBM Mzk3LjU5OTcsMzA5LjAzNjcgTDQwMC4xNzczLDMwNC43ODcxIEw0MDIuNzQ3NywzMDQuNDQ5NCBM NDA1LjMyNTQsMzAwLjQ4MTMgTDQwNy44OTU4LDI5OS45MTg0IEw0MTAuNDY2MiwyOTguMjg2MSBM NDEzLjA0MzksMjk1LjgwOTYgTDQxNS42MTQzLDI5NS4xNjIzIEw0MTguMTkxOSwyOTQuMDA4NCBM NDIwLjc2MjQsMjkwLjc3MiBMNDIzLjM0LDI4OC4wMTQgTDQyNS45MTA0LDI4Ny44NzMzIEw0Mjgu NDgwOSwyODQuNzc3NiBMNDMxLjA1ODUsMjg5LjExMTYgTDQzMy42Mjg5LDI4NC4xMDIxIEw0MzYu MjA2NSwyODIuMDc1OSBMNDM4Ljc3NywyNzkuMDA4MyBMNDQxLjM1NDYsMjc1LjE1MjcgTDQ0My45 MjUsMjczLjk0MjYgTDQ0Ni40OTU1LDI3Mi45ODU3IEw0NDkuMDczMSwyNjguMzcwMyBMNDUxLjY0 MzUsMjY0LjAzNjMgTDQ1NC4yMjEyLDI1Ny4zNjY0IEw0NTYuNzkxNiwyNTQuMTAxOSBMNDU5LjM2 MiwyNDkuNjgzNCBMNDYxLjkzOTcsMjQ2Ljg2OTEgTDQ2NC41MTAxLDIzNy44OTE2IEw0NjcuMDg3 NywyMjkuMDI2NiBMNDY5LjY1ODIsMjI1LjA4NjYgTDQ3Mi4yMzU4LDIyMy4zMTM2IEw0NzQuODA2 MiwyMjQuODg5NiBMNDc3LjM3NjcsMjIzLjU2NjkgTDQ3OS45NTQzLDIyMS4zNzE3IEw0ODIuNTI0 NywyMjEuMzk5OSBMNDg1LjEwMjMsMjExLjc3NSBMNDg3LjY3MjgsMjA5LjI0MjEgTDQ5MC4yNTA0 LDIwOS4xMjk2IEw0OTIuODIwOCwyMTkuNDAxNyBMNDk1LjM5MTMsMjIzLjQyNjEgTDQ5Ny45Njg5 LDIxNi42MTU2IEw1MDAuNTM5MywyMTEuNDkzNiBMNTAzLjExNywyMDUuNDE0NyBMNTA1LjY4NzQs MjA2Ljc2NTYgTDUwOC4yNjUsMjAzLjMwNCBMNTEwLjgzNTUsMjAwLjkxMTkgTDUxMy40MDU5LDIw MS42MTU0IEw1MTUuOTgzNSwxOTkuNTMyOSBMNTE4LjU1NCwyMDMuMTYzMyBMNTIxLjEzMTYsMjAw Ljc3MTEgTDUyMy43MDIsMTk1Ljk1ODcgTDUyNi4yNzI1LDE5NS4xNDI2IEw1MjguODUwMSwxOTQu MjQyIEw1MzEuNDIwNSwxOTAuNTU1MyBMNTMzLjk5ODEsMTgzLjIxIEw1MzYuNTY4NiwxODMuODU3 MyBMNTM5LjE0NjIsMTc4LjIwMDYgTDU0MS43MTY2LDE3Ny4zODQ0IEw1NDQuMjg3MSwxNzcuNjA5 NiBMNTQ2Ljg2NDcsMTY1LjAyOTcgTDU0OS40MzUxLDE2My41OTQ0IEw1NTIuMDEyOCwxNjguODU3 MSBMNTU0LjU4MzIsMTcxLjMzMzcgTDU1Ny4xNjA4LDE3Ny45NDczIEw1NTkuNzMxMywxODUuNTQ1 OSBMNTYyLjMwMTcsMTc1LjY2NzcgTDU2NC44NzkzLDE3OS40Mzg5IEw1NjcuNDQ5OCwxNzUuMzMg TDU3MC4wMjc0LDE3Ni42ODA5IEw1NzIuNTk3OCwxNjguMDEyOSBMNTc1LjE3NTQsMTcxLjU4NyBM NTc3Ljc0NTksMTgyLjE5NjkgTDU4MC4zMTYzLDE3OS43MjAzIEw1ODIuODkzOSwxNzguMTcyNCBM NTg1LjQ2NDQsMTY4LjI5NDMgTDU4OC4wNDIsMTYyLjAxODQgTDU5MC42MTI0LDE1NS45Mzk2IEw1 OTMuMTgyOSwxNTAuMTE0IEw1OTUuNzYwNSwxNTQuODcwMSBMNTk4LjMzMDksMTUwLjE3MDMgTDYw MC45MDg2LDE1MC4wODU5IEw2MDMuNDc5LDE1NC44NDIgTDYwNi4wNTY2LDE1NS4yMzYgTDYwOC42 MjcxLDE1MC41NjQzIEw2MTEuMTk3NSwxNDkuMTg1MyBMNjEzLjc3NTEsMTQ4Ljk4ODMgTDYxNi4z NDU2LDE0OS43NzYzIEw2MTguOTIzMiwxNjMuMzEzIEw2MjEuNDkzNiwxNjUuMTE0MSBMNjI0LjA3 MTIsMTUxLjA0MjcgTDYyNi42NDE3LDE0NS4wNzY0IEw2MjkuMjEyMSwxMzMuMTcyIEw2MzEuNzg5 NywxMjcuNjI3OSBMNjM0LjM2MDIsMTE5Ljc3NiBMNjM2LjkzNzgsMTI1LjE3OTQgTDYzOS41MDgy LDEyMC4yMjYzIEw2NDIuMDg1OSwxMTEuODk2IEw2NDQuNjU2MywxMDcuMzkzMSBMNjQ3LjIyNjcs OTYuMDUxNiBMNjQ5LjgwNDQsOTUuMzE5OSBMNjUyLjM3NDgsOTMuOTEyNyBMNjU0Ljk1MjQsODQu OTYzMyIKcGF0aGxlbmd0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=