为什么 WebKit 不自动更新样式，如何强制重绘？

强制 WebKit 更新样式

您遇到一个问题，即通过 JavaScript 应用的样式更改不会传播到基于 WebKit 的浏览器，例如 Chrome 和 Safari。当多个元素从具有焦点或包含交互式元素（例如链接）的子元素继承样式时，有时会出现这种情况。

WebKit 的无响应

WebKit 不响应当它收到继承样式的更新时自动重新绘制。这与 Firefox、Opera 和 IE 等其他浏览器形成鲜明对比，后者可以更无缝地处理这些更改。

通过微调强制重新绘制

因为 WebKit 不更新自动样式，您可以通过对页面上的任何元素进行较小的更改来强制重新绘制。在 Chrome 开发者工具中，您观察到，即使取消选中并重新选中任意元素的属性也会触发正确的样式更新。

建议的解决方案

以编程方式强制重新绘制，您可以使用以下技术：

sel.style.display = 'none';
sel.offsetHeight; // no need to store this anywhere, just referencing it is sufficient
sel.style.display = '';

此方法涉及暂时隐藏然后取消隐藏元素。 offsetHeight 行确保浏览器实际应用更改。您不需要存储它返回的高度。

潜在限制

所提供的解决方案已确认适用于具有“块”显示的元素。对于具有其他显示模式的元素，它可能会表现出不同的行为，但这需要进一步调查。

以上是为什么 WebKit 不自动更新样式，如何强制重绘？的详细内容。更多信息请关注PHP中文网其他相关文章！