Firefox неправильно показывает вертикальную полосу прокрутки на 100vh. (Chrome и Safari не показывают полосу прокрутки)

Question

Я экспериментирую с HTML5 Canvas и хотел создать каванну, покрывающую весь видовой экран.

Вот jsfiddle, показывающий, что я пробовал: https://jsfiddle.net/hefczx3a/3/

Однако со следующим CSSFirefox показывает вертикальную полосу прокрутки:

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

Chrome не показывает вертикальную полосу прокрутки. Все элементы имеют одинаковые размеры и нет отступов / полей. Это ошибка или я могу что-то сделать, чтобы это исправить?

Answer 1

сброс

• свойство отображения для блокировки

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>

• или выравнивание по вертикали сверху

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>

---

Почему я должен сбросить дисплей, не является ли он блоком?

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

Категории контента Потоковое содержимое, фразовый контент, встроенный контент, ощутимый контент.

Разрешенный контент Прозрачный, но без потомков интерактивного контента, кроме <a>элементы, <button> элементы, <input> элементы, атрибутом типа которых является флажок, радио или кнопка.

Пропуск тега Нет, начальный и конечный тег обязательны.

Разрешенные родители Любой элемент, принимающий фразы.

Разрешенные роли ARIA Любой

Интерфейс DOM HTMLCanvasElement

он обрабатывается как любой другой элемент, который встраивает содержимое, а Firefox отображает его как содержимое в виде встроенного блока / фразы. Посмотрите, что разрешено родителям, если вы читали по диагонали

Другие подобные элементы: https://html.spec.whatwg.org/multipage/dom.html#embedded-content-category

Answer 2

Вы можете удалить полосу прокрутки во всех браузерах, используя scrollbar-width: none; свойство

Например:

body {
  scrollbar-width: none;
}