WordPress站点桌面端部分DOM元素不可见，移动端正常求排查

我的网站首页是运行在AWS Ubuntu系统、LiteSpeed服务器上的WordPress站点，搭配LSCache与Memcached。今日发现首页标题栏后的部分DOM元素存在但不可见，可点击或拖拽查看隐藏图片。昨日仅修改了其他页面文本，未改动首页。

已完成的排查操作：

• 绕过Cloudflare访问
• 清除LSCache缓存
• 禁用所有插件
• 更新WordPress及主题至最新版本
• 多浏览器设备测试：iOS Safari与Android Chrome无异常，仅桌面端Webkit浏览器（如Chrome、Edge桌面版）出现问题
• 检查页面构建器，无未闭合标签或损坏元素

推测为桌面端Webkit浏览器渲染问题，寻求解决方案。

1. CSS渲染问题排查 #

• 检查目标元素的opacity、visibility、display属性，确认是否存在桌面端媒体查询下的异常设置
• 排查是否有transform: translateZ(0)、will-change等触发GPU加速的属性，这类属性可能导致Webkit渲染异常，可临时移除测试
• 验证元素z-index层级，确认是否被固定定位的导航栏或其他元素意外覆盖

2. LiteSpeed与缓存调整 #

• 临时关闭LSCache的CSS Minify、JS Minify功能，重新生成缓存后测试——压缩过程可能引发Webkit兼容性问题
• 检查LiteSpeed的Browser Cache规则，确认是否对桌面端Webkit浏览器设置了特殊缓存策略，可临时关闭浏览器缓存验证

3. Webkit特定兼容性修复 #

• 添加针对桌面端Webkit的CSS修复规则：

  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* 替换为你的目标元素类名 */
    .target-hidden-element {
      opacity: 1 !important;
      visibility: visible !important;
    }
  }
  

• 若使用了position: sticky等属性，可尝试替换为position: fixed结合JS控制的布局方式，规避Webkit桌面端的兼容性bug

4. 服务器环境验证 #

• 执行systemctl status memcached检查Memcached服务状态，异常则重启服务：sudo systemctl restart memcached
• 检查Ubuntu系统内核版本，若版本较旧可尝试更新（操作前务必备份数据），排除内核与LiteSpeed的兼容问题

内容的提问来源于stack exchange，提问作者Iman B. Rad