一个蜜罐字段毁了我的阿拉伯语页面

Convertica 支持七种语言。其中六种是从左向右阅读的，而阿拉伯语是从右向左阅读的。这种不匹配让我浪费了数小时的调试时间。

在我的浏览器中，每个阿拉伯语页面看起来都正常。但当我运行 Lighthouse 时，截出来的图却是空白的——一片纯白，既没有显示损坏，也没有显示加载了一半。

URL 和 HTML 都没有变化。Chrome 可以正常显示页面，但 Headless Chrome 却什么也显示不出来。由于 Google 和 Bing 的爬虫使用的是无头浏览器，所以这个问题至关重要。

罪魁祸首是一个垃圾邮件蜜罐（spam honeypot）。我添加了一个隐藏的 input 字段来捕捉机器人，并将其放置在视口（viewport）之外很远的地方：

  • position: absolute
  • left: -9999px
  • opacity: 0

在从左向右阅读的文档中，浏览器会裁剪溢出部分，因此蜜罐字段位于无效空间中。

当我设置 dir="rtl" 时，滚动原点会跳转到右边缘。左侧的溢出部分变成了实际空间，导致文档宽度被拉伸到一万像素，而内容却挤在最右侧。

我的浏览器会自动滚动到右侧原点，所以我没发现任何问题。而无头渲染器从最左侧角落开始，渲染了九千像素的空白内容。

只需更改一个属性即可修复。

将 left 替换为 inset-inline-start。

  • 旧代码： position: absolute; left: -9999px;
  • 新代码： position: absolute; inset-inline-start: -9999px;

inset-inline-start 会遵循书写方向——在 LTR 中相当于 left，在 RTL 中相当于 right——从而确保蜜罐字段始终位于屏幕外的正确一侧。

在添加 RTL 支持时，请检查你以前使用的“屏幕外”黑科技（off-screen hacks）。这包括蜜罐字段、跳过链接（skip links）和隐藏的 div。请将 left/right 替换为逻辑属性（logical properties）。

你的浏览器并不是测试此 Bug 的好工具；它通过自动滚动为你掩盖了失败。请使用无头模式渲染页面，以查看实际的像素情况。

如果某种语言的曝光量突然停止，而其他语言正常，请检查你的渲染器。

来源：https://dev.to/convertica/a-honeypot-field-made-every-arabic-page-on-my-site-render-blank-3aji