Margin bug: canvas and elm-canvas don't share the same height

[joakin]

Margin bug: canvas and elm-canvas don't share the same height

[joakin]

Oh wow, I don't know why this is happening!

It is good practice to have the doctype directive in html files, see https://developer.mozilla.org/en-US/docs/Glossary/Doctype

Its sole purpose is to prevent a browser from switching into so-called "quirks mode" when rendering a document; that is, the "" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.

Unfortunate this is happening. I see it happen in chrome firefox and safari...

Going to investigate a bit to see what is up. As a workaround, you can set the width and height on the canvas with Html.Attributes.style.

---

BTW in this ellie https://ellie-app.com/mSkWgBR8Q5Na1, I tried removing the doctype and it still shows the red bar at the bottom 😖

[joakin]

https://stackoverflow.com/questions/7266276/doctype-affects-width-and-height-of-html-body-canvas 💡

[joakin]

Exactly right, adding display: block; to the inner canvas fixes this... What a dumb default for a canvas element, display inline... 🤦

This needs fixing in the library then 👍

[benjamin-thomas]

Exactly right, adding display: block; to the inner canvas fixes this... What a dumb default for a canvas element, display inline... facepalm

This needs fixing in the library then +1

Thanks for finding a solution @joakin. I suspected something a little more tricky, but in the end it's a pretty easy fix then :)

Have a great week