2

I'm experimenting with HTML5 Canvas and wanted a cavnas that covered the entire viewport.

Here is a jsfiddle showing what I tried: https://jsfiddle.net/hefczx3a/3/

However, with the following CSS Firefox shows a vertical scrollbar:

html,
body,
canvas {
  border: none;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

Chrome does not show a vertical scrollbar. All the elements are the same dimensions and there is no padding/margins. Is this a bug or is there something I can do to 'fix' it?

Eivind Furuberg
  • 83
  • 1
  • 8

2 Answers2

4

reset

  • the display property to block

const canvas = document.querySelector('#canvas')

const viewportWidth = window.innerWidth 
const viewportHeight = window.innerHeight 

if (canvas.getContext) {
  const context = canvas.getContext('2d')

  context.fillStyle = '#222'
  context.fillRect(0, 0, viewportWidth, viewportHeight)
}
html,
body,
canvas {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

canvas {
  display: block
}
<canvas id="canvas" resize="true">
      Your browser does not support HTML Canvas.
      To view this page, use a browser that supports HTML Canvas.
    </canvas>
  • or vertical-align to top

const canvas = document.querySelector('#canvas')

const viewportWidth = window.innerWidth 
const viewportHeight = window.innerHeight 

if (canvas.getContext) {
  const context = canvas.getContext('2d')

  context.fillStyle = '#222'
  context.fillRect(0, 0, viewportWidth, viewportHeight)
}
html,
body,
canvas {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

canvas {
  vertical-align:top;
}
<canvas id="canvas" resize="true">
      Your browser does not support HTML Canvas.
      To view this page, use a browser that supports HTML Canvas.
    </canvas>

Why should i reset display , is it not a block ?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas

Content categories Flow content, phrasing content, embedded content, palpable content.

Permitted content Transparent but with no interactive content descendants except for <a> elements, <button> elements, <input> elements whose type attribute is checkbox, radio, or button.

Tag omission None, both the starting and ending tag are mandatory.

Permitted parents Any element that accepts phrasing content.

Permitted ARIA roles Any

DOM interface HTMLCanvasElement

it is treated like any other element that embed content and firefox renders it as an inline-boxe / phrasing content . See what permitted parents are if you did read in diagonal

Other similar elements : https://html.spec.whatwg.org/multipage/dom.html#embedded-content-category

Community
  • 1
  • 1
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • position:absolute would also remove that scrollbar, here ... not sure it explains anyting – G-Cyrillus Oct 30 '19 at 13:10
  • Yeah, the `display: block` property fixed the issue. But I don't think I understand why... – Eivind Furuberg Oct 30 '19 at 13:15
  • @EivinduberslothFuruberg because it is rendered as an inline-box (like img) and it stands on the base line, , a block does not , it breaks a line before and after itself. vertical-align can also be used to modify the vertical-align defaut value ... just like img does. Your issue is similar to https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image this is that gap that produces your scrollbar, get rid of it. and no scroll/no extra space . - *btw, i think FF is right here*. – G-Cyrillus Oct 30 '19 at 13:33
  • 1
    Thank you for the clarification and further reading material! – Eivind Furuberg Oct 30 '19 at 15:26
-1

You can remove scrollbar in all browsers by using scrollbar-width: none; property

Like this:

body {
  scrollbar-width: none;
}
KletskovG
  • 520
  • 4
  • 10
  • @EivinduberslothFuruberg I edited my snippet, check it – KletskovG Oct 30 '19 at 12:39
  • Doesn't exactly work, it hides the scrollbars but the content is still scrollable. – Eivind Furuberg Oct 30 '19 at 12:42
  • 1
    Also it seems that firefox adds some sort of whitespace to the bottom of the page which I can't find any source on. There is this little white line under the canvas. – Eivind Furuberg Oct 30 '19 at 12:44
  • Try to replace `width: 100%;` and `height: 100%;` to `width: 100vw;` and `height: 100vh;` – KletskovG Oct 30 '19 at 12:44
  • Since it works as intended on Chrome, it seems to be some quirk with how Firefox interprets `overflow`, maybe something in the line of `overflow = childSize >= parentSize` instead of `>`... dunno – Eivind Furuberg Oct 30 '19 at 12:51
  • I edit your jsfiddle locally (On my laptop) and it work, but jsfiddle doesnt know `scrollbar-width` property. So do you try to do it on your machine? – KletskovG Oct 30 '19 at 12:59
  • Yes, but `scrollbar-width: none` does not solve the problem. It hides the scrollbars, but the content is still scrollable. (even though it shouldn't be). I'll try to contact some Firefox developers to see if they know about it. – Eivind Furuberg Oct 30 '19 at 13:03