时间戳

首页 > 解决方案 > Firefox 在 100vh 上错误地显示垂直滚动条。（Chrome 和 Safari 不显示滚动条）

html - Firefox 在 100vh 上错误地显示垂直滚动条。（Chrome 和 Safari 不显示滚动条）

问题描述

我正在试验 HTML5 Canvas 并想要一个覆盖整个视口的 cavnas。

这是一个显示我尝试过的 jsfiddle：https ://jsfiddle.net/hefczx3a/3/

但是，使用以下 CSS Firefox 会显示一个垂直滚动条：

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

Chrome 不显示垂直滚动条。所有元素的尺寸相同，并且没有填充/边距。这是一个错误还是我可以做些什么来“修复”它？

标签： htmlcssfirefox

解决方案

重置

  • 要阻止的显示属性

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 将其呈现为 inline-boxe / phrasing content 。如果您确实阅读了对角线，请查看允许的父母是什么

其他类似元素：https ://html.spec.whatwg.org/multipage/dom.html#embedded-content-category

推荐阅读