谷歌浏览器升级后backface-visibility: hidden;翻转异常的解决方案

在将谷歌浏览器升级到最新版本 (95) 后，使用 backface-visibility: hidden 属性对元素进行 3d 翻转时，一些用户遇到了异常问题。此属性旨在隐藏元素的背面，但在新版本中似乎不再正常工作。

问题症状

使用 backface-visibility: hidden 属性的元素在翻转时会显示其背面，导致其内容可见。这与预期的隐藏行为相反。

解决方案

小红书长文-谷歌浏览器

在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。

下载

解决此问题的最佳解决方案是使用 css transform-style 属性。此属性允许您指定如何应用元素的 3d 转换。

要修复翻转功能，请使用以下代码：

transform-style: preserve-3d;
backface-visibility: hidden;

此代码将为元素应用 3d 转换风格，从而使 backface-visibility: hidden 属性正常工作。

其他注意事项

• 确保您已正确关闭浏览器并重新打开它以使更改生效。
• 如果问题仍然存在，请尝试清除浏览器的缓存和 cookie。
• 使用 chrome 开发人员工具检查元素的样式以确保已应用正确的属性。
• 如果上述方法都无效，请联系 google 以报告错误。