[css-houdini-drafts] [css-paint-api] Math.random usage in CSS Paint API leads to jitter in painted effect. (#970)

flackr has just created a new issue for https://github.com/w3c/css-houdini-drafts:

== [css-paint-api] Math.random usage in CSS Paint API leads to jitter in painted effect. ==
There are many examples of paint worklet being used to generate interesting random patterns:

https://paintlets.herokuapp.com/
https://css-houdini.rocks/rough-boxes

However, using Math.random() in your paint worklet means that any time the browser needs to repaint the element the output changes. See for example this demo of running a transition on the paint worklet background color where you can see the rough border jitter while the color is animating. The same effect is observed anytime the window resizes:

https://animated-paintworklet-element.glitch.me

While some demos like https://css-houdini.rocks/random-bubbles-mask take into account random number generation I suspect the majority won't. We should consider whether it is possible to use a seeded random number generator for paint worklets to provide output stability in these cases. While this doesn't solve all cases (i.e. the random numbers may be manipulated differently given different inputs) it is much more obvious why something changes in these cases.

Please view or discuss this issue at https://github.com/w3c/css-houdini-drafts/issues/970 using your GitHub account

Received on Monday, 28 October 2019 21:42:50 UTC