NEED HELP! Fixing Disproportionate scrolling HTML 5 canvas overlaying scaled elements

[Saint_Pepsi]

Hi All,

I Hope I've put this in the right place, I've been struggling with this issue for a while now. 
I've had a stack overflow issue open for more than a year and no replies.

In basics.
I overlay a canvas on my UI DOM, this canvas has animations / particles / tutorial pointers etc. to make the UI prettier and filled with motion.

The problem comes when you try to scroll something that is underneath this canvas, the scrolling becomes disproportionate

Please see my stackoverflow issues: 
https://stackoverflow.com/questions/67511840/disproportional-overflow-scrolling-on-scaled-element
https://stackoverflow.com/questions/67541498/disproportionate-scrolling-on-element-with-an-overlaying-pointer-eventsnone-el

Has anyone battle with this before? 
Or perhaps any suggestions for a workaround?

Kind Regards,
SanCoca

[Milton]

I think it doesn't take account of the scale factor. If your ui div isn't scaled, the scrolling speed would probably be the same.
Maybe try googling for "scale scroll speed mobile" for some suggestions.

[Saint_Pepsi]

Thanks for the suggestion @Milton, I did come across 1 guy who seemingly got closer to solving it but still too far off that it was anything practical. 
As a workaround for now I'm only showing the overlaying element when it actually has anything to render.