css scroll-snap not working when rule is first removed then added again (chrome)

Question

i have a container with scroll-snap-type: y mandatory; and child elements with scroll-snap-align: start;. In chrome the scroll snapping works as expected. i then remove the css rule regarding the scroll-snap-type via js and set it later back. after that the snapping does not work. is this a bug? am i doing something wrong? is this behaviour acording to the spec? or is there a workaround for it?

(i have only tested it in chrome browser on a windows machine.)

demo: https://jsfiddle.net/gjcs3y6k/2/

Answer 1

If you also remove and then add a rule for child elements, scroll-snap-align, it works ok.

I updated your fiddle: https://jsfiddle.net/gjcs3y6k/4/