Question

我遇到了影响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中，在Dev工具中单击它们会使它们逐渐出现。水平调整浏览器窗口的大小也会导致它出现，可能是因为工具栏样式稍有变化并触发它重绘。

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

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

非常感谢！

Answer 1

我也遇到了同样的问题，并发现[hidden]属性在以边缘形式呈现网页内容时存在一些问题（因为它在Google Chrome，Mozilla，IE中运行良好），并且在删除了该属性后，网站已完全加载在Edge中很好。

因此，我使用* ngIf来显示和隐藏内容，而不是使用[hidden]。

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

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

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

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

Answer 2

在将hidden设置为false时，我遇到了一个问题，即要使弹出式窗体呈现在页面的固定位置，同时使页面的其余部分变暗。

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

就我而言，我只是改用CSS显示：无/阻止；而是在考虑将Edge属性与Edge一起使用时要特别注意。

Answer 3

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

用display：none替换隐藏属性后，它可以正常工作。

Answer 4

用[hidden]代替*ngIf解决了该问题。

元素未在Microsoft Edge中呈现

4 个答案: