Question

自Chrome发布版本62以来，我遇到了CSS visibility规则的问题。

例如，我的代码中使用style.visibility = "hidden"设置的元素在屏幕上仍然可见 - 即使我可以看到此元素的css visibility规则在开发人员中设置为hidden控制台面板。

抱歉，我无法制作MCVE，但这里是a live example 例如，检查＆＃39;新游戏＆＃39; 按钮或＆＃39;说明＆＃39; 按钮，它们不应该是可见的。

我的应用程序在此之前正在运行，并且它们在所有其他浏览器上运行良好，但在Chrome 62中，它会越来越多。

Answer 1

这确实是一个chrome bug甚至可以触及谷歌自己的产品。 _{感谢PaulR的链接。}

~~他们正在努力，~~ *但是暂时，我可以在你的网站上测试的一个解决方法就是附加一个全局

* {
  transition: visibility 0.01s;
}

在设置visibilty规则之前，请先在CSS中进行规则。

这将确保计算并正确绘制每个可见性更改，从而消除错误但要注意，它也可能导致所有非bug浏览器的性能成本......

* 现在应该在最新的金丝雀（64）

中修复

以下是我用于在您的网页上测试此理论的用户脚本：

// ==UserScript==
// @name        visibility fix
// @include     http://www.pearsonplaces.com.au/portals/0/JennyS/HTML5Templates/bullsEye/bullsEye.html
// @version     1
// @grant       none
// @run-at document-start
// ==/UserScript==
var s = document.createElement('style'); // create a style element
document.head.appendChild(s); 
s.textContent = '*{transition: visibility .01s}'; // set the transition to all the elements

Ps：如果你只有一个元素发生了这个错误，另一个解决方法可能就是改变元素的位置，然后强制重排并改回元素的位置，但是IMM它＆＆＃39;更难实现，因为它需要修改设置了可见性规则的所有js代码，而且我甚至不确定它对性能是否有益。

新Chrome版本存在javascript问题（62）？

1 个答案: