javascript - 初始加载时画布网格被压扁，调整网页窗口大小后自动调整为方形网格

Question

最初加载网站时，网格是 squashed squashed grid

调整网页窗口大小后，它会自动修复问题 平方网格，但网格会延伸到网页上

进入 css 后，box-sizing 是固有的。如果我删除 box-sizing 属性，则网格是固定的。

以下是网格的 css 代码。

#renderContainer {
    z-index: 0;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;

* {
    padding: 0;
    margin: 0;
}

*, ::before, ::after {
    background-repeat: no-repeat;
    box-sizing: inherit;

源代码可以在https://github.com/CIDARLAB/3DuF/blob/webpack-build/src/components/Visualiser.vue上找到

样式代码可以在https://github.com/CIDARLAB/3DuF/blob/webpack-build/public/modified.css上找到

html 可以在https://github.com/CIDARLAB/3DuF/blob/webpack-build/public/index2.html上找到

有谁知道为什么会这样？

谢谢！

标签： javascriptcssvue.jscanvasgrid