Question re: sliding canvas on touch

Question

In this code, if run as is, when you touch/drag the screen/canvas slides which is problematic.

If the <canvas> container is uncommented it still slides.

If <canvas> is left commented and the <style> container is uncommented it resolves the issue.

As both containers use the same style values, why does one work but not the other?

https://sololearn.com/compiler-playground/WWET43frXN76/?ref=app

Answer 1

Solo

No, there's no confusion here🤣

If you uncomment the <Canvas> section, run the code then touch and move your finger up & down the screen, the canvas slides and slightly stretches, and there is not a steady stream of ellipses.

However, if instead only the <style> container is uncommented (or both) then the canvas does not slide and the ellipses render steadily without issue.

Answer 2

Solo
This video clearly illustrates the problem. It's quite obvious, at least to me, that there is an issue with which method is used to style the canvas. In one case the canvas is -not- fixed, regardless of what the "position:fixed" indicates...
https://sololearn.com/compiler-playground/Wp6TPT0HA3qI/?ref=app

Answer 3

Solo
As the video clearly shows, this is occuring in the Sololearn app.

Answer 4

Both options work equally well for me. Maybe you're already confused yourself...😎

Answer 5

Scott D That's what I did. In both cases, the canvas is fixed.

Answer 6

Scott D Yes, I understood perfectly well what it was about.

Answer 7

Scott D perhaps your browser does not perceive this style in the html tag.