未在 Microsoft Edge 中呈现的元素答案

【问题标题】：Elements not being rendered in Microsoft Edge未在 Microsoft Edge 中呈现的元素
【发布时间】：2018-02-06 10:35:08
【问题描述】：

我遇到了一个影响 Microsoft Edge 的奇怪问题。我正在使用painterro javascript 库来构建图像编辑器，并且大多数情况下效果很好。但是有些元素没有被正确渲染，我不知道为什么。它似乎只影响Edge。 Firefox、Chrome、Safari，甚至 IE11 都可以正常工作。

这样一个简单的页面就说明了问题：

<html>
    <head>
        <script src="https://github.com/ivictbor/painterro/releases/download/v0.2.57/painterro-0.2.57.min.js"></script>
    </head>
    <body>
        <script>
            Painterro().show();
        </script> 
    </body>
</html>

页面初始加载时，工具栏不显示。这些元素存在于 DOM 中，在开发工具中单击它们会使它们逐渐出现。水平调整浏览器窗口大小也会导致它出现，可能是因为工具栏样式发生了轻微变化并触发了重绘。

同样的问题也会影响设置和颜色选择器对话框。

我对此有点困惑，它看起来可能是浏览器错误，但我不能确定。我找不到任何其他遇到此问题的人的示例。有没有其他人遇到过类似的问题？

非常感谢！

【问题讨论】：

标签： html microsoft-edge

【解决方案1】：

我也有同样的问题并发现 [hidden] 属性在边缘的网页上呈现内容时存在一些问题（因为它在 Google Chrome、Mozilla、IE 中工作得非常好）并且在删除该属性网站后绝对加载在 Edge 中很好。

所以我没有使用 [hidden]，而是使用 *ngIf 来显示和隐藏内容。

我发现这在 Microsoft Edge 中不起作用的可能原因是：-

隐藏的全局属性是一个布尔属性，指示该元素尚未相关或不再相关。因此，浏览器不会渲染带有 hidden 属性集的元素。

浏览器将“显示：无”样式附加到具有隐藏属性的元素。并且当组件加载时，样式“display: none”不会自动更新。

并且 *ngIf 不会显示/隐藏基于 display 属性的元素，如 hidden。它通过在 DOM 中添加和删除元素来工作。

【讨论】：

【解决方案2】：

这是由于使用了hidden 属性。由于某种原因，元素并不总是在属性被删除后重新绘制。需要更多研究，但它看起来确实像 Edge 中的一个错误。

将 hidden 属性替换为 display:none 后，效果很好。

【讨论】：

【解决方案3】：

将[hidden] 替换为*ngIf 解决了该问题。

【讨论】：

【解决方案4】：

我在将 hidden 设置为 false 以使弹出表单呈现在页面上的固定位置同时使页面的其余部分变暗时遇到问题。

它在 Chrome 和 Firefox 中运行良好，但我在 Edge 中得到了一个白色的小空框。如果我将整个浏览器窗口拖到屏幕外并返回（或第二个监视器），则表单会自动呈现 - 我可以打开和关闭隐藏属性。但是刷新页面导致了同样的问题。

就我而言，我只是改为使用 CSS display: none/block;取而代之的是，在考虑将 hidden 属性与 Edge 一起使用时要小心。

【讨论】：