joakin
Margin bug: canvas and elm-canvas don't share the same height
Hi!
I banged my head on this one :) I'm pretty sure the bug is in the library so here is my bug report.
The bug cannot be observed by opening the documented examples, such as this one: https://chimeces.com/elm-canvas/ellie.html
But the bug can be observed by opening the documented starter template example, here: https://ellie-app.com/62Dy7vxsBHZa1
The code of both examples is mostly the same, but if you look carefully at the ellie template, canvas and elm-canvas don't share the same height:
This causes problems with edge detection (I wanted to animate a bouncing ball).
After much head scratching, I noticed that removing <!DOCTYPE html> from my HTML document made the problem disappear! And this is consistent with the two examples mentioned above: the one displaying the problem does have a <!DOCTYPE html> decleration, the one that is not displaying the problem does not have a <!DOCTYPE html> declaration.
See the effect of removing/adding the <!DOCTYPE html> declaration below:
https://github.com/benjamin-thomas/nature-of-code/tree/efc9abd26beacd27e10e0f00fdb9ed52883aba8a/_basic_setup/elm/elm-canvas
I found writing custom CSS rules quite tricky with this library, so in the end I followed the starter template's suggestion.
Maybe all that's required is suggesting better CSS defaults?
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 😖
https://stackoverflow.com/questions/7266276/doctype-affects-width-and-height-of-html-body-canvas 💡
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 👍
Exactly right, adding
display: block;to the inner canvas fixes this... What a dumb default for a canvas element, display inline... facepalmThis 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