javascript - 高度 : auto calculating incorrectly if element is hidden when dom loads, 然后稍后显示

Question

我有一个带有 css 宽度:100% 和高度:100% 的 svg。 wrap 元素占据了屏幕的整个宽度。高度是自动的。 wrap div 定义了 svg 的尺寸。

例如

<div id="svg-wrap" style="width: 100%; height: auto;">
    <svg style="width: 100%; height: 100%;"></svg>
</div>

如果我在隐藏这些元素的情况下加载页面(显示:无)，当在 dom 准备好后显示元素时，它似乎会干扰高度的计算。例如，svg 的尺寸最终会变得非常不成比例，例如 1024 像素宽 x 25 像素高，而不是 500 像素高。

我假设如果对象被隐藏，它无法计算对象的宽度，并且它会杀死自动高度。我错过了什么？或者解决方法是什么？

Answer 1

而不是 display:none; 使用 visibility:hidden; 就可以了!

display:none; 从字面上从代码中隐藏对象，而 visibility:hidden; 只是从用户的 View 中隐藏对象。