带有 jquery 和 dir=rtl 的 HTML 页面在 chrome 上显示为空白答案

【问题标题】：Html page with jquery and dir=rtl appears blank on chrome带有 jquery 和 dir=rtl 的 HTML 页面在 chrome 上显示为空白
【发布时间】：2017-10-28 17:57:08
【问题描述】：

在过去的几个月里，我目睹了一个奇怪的现象，Chrome 加载了一个网页，直到我开始滚动时才显示任何内容。起初我认为这是网站的问题，然后是 Chrome 的一些最新版本的故障，但现在我认为这与 jquery 和 rtl 之间的某些冲突有关。以下示例显示一个空白页面，直到我开始滚动：

<!doctype html>
<html dir="rtl">
  <body>
    <h1>Blank screen test</h1>
    <div style="padding: 50%; background-color: orange;">Hey</div>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
  </body>
</html>

这并不总是发生，但它在我的机器上总是发生（例如，大约 70% 的刷新）。确保开发人员工具已关闭 - 出于某种原因，它们在打开时不会发生。

删除dir="rtl" 可以防止这种情况发生。

删除<script src="https://code.jquery.com/jquery-1.11.1.js"></script> 也可以防止这种情况发生。

不知道该怎么做。有没有其他人看到这种情况发生？任何想法如何解决这个问题？

（顺便说一句，我在 Mac OS 10.12.5 上使用 Chrome 58.0.3029.110（64 位））

Here is a link to an example page.

Here is how it looks before I start scrolling 和 here is how it looks the instance scrolling starts。

【问题讨论】：

看起来像黑森虫
@RoySharon 我可以在团队查看器上花费几个小时来检查您身边的确切问题，并帮助解决它。请随时在Skype上加我：prollygeek
看起来像是在 Chromium 中报告的 issue 707542。在that post from 2015 中可以找到关于该问题的另一个讨论（或非常相似的讨论）。
@ConnorsFan 不错！谢谢。确实看起来像同样的问题。这在 2017 年 4 月 21 日被标记为已修复，因此根据 Chromium 发布时间表 (chromium.org/developers/calendar)，它应该在 60 版中发布，该版本计划于 2017 年 5 月 25 日发布（7 月 26 日的稳定版）。我会下载这个版本，看看bug是否仍然存在。
似乎这个问题在 Chrome 的 59 版中得到了解决。我已经下载了测试版（59.0.3071.82（官方构建）测试版（64 位）），我可以确认上面的空白测试网址可以正常显示。试了大约 50 次，效果很好。所以bug可能会解决。感谢@ConnorsFan 的指点！

标签： jquery html google-chrome right-to-left

【解决方案1】：

属性dir可以被CSS direction: rtl;覆盖，当涉及到内容呈现时：

由于文本的方向性是语义相关的，我建议你在加载jQuery时在Javascript中添加dir='rtl'。这样，dir 在页面加载时不会干扰 jQuery。

<html>
  <body>
    <h1>Blank screen test</h1>
    <div style="padding: 50%; background-color: orange;">Hey</div>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script type="text/javascript">
      $(document).ready(function() { $('html').attr('dir', 'rtl'); });
    </script>
  </body>
</html>

【讨论】：

感谢您的建议！它适用于我的机器。我请其他读者对此进行测试，看看它是否也适用于他们：roysharon.com/blanktest2.html
感谢您编辑 sn-p。但我认为您需要在示例中添加 CSS。这将避免在加载 JS 时文本位于左侧，并确保您的内容具有正确的方向。
嗯，添加css会导致问题再次出现。这就是我把它拿出来的原因：roysharon.com/blanktest2.html
为了避免在dir还是ltr时显示页面，我们可以在html标签中添加style="display:none"，然后将onready func改为$(function() { $('html').attr('dir', 'rtl').show(); })
Chrome 版本 59 似乎包含对此问题的修复 (bugs.chromium.org/p/chromium/issues/detail?id=707542)。刚刚下载了测试版，空白测试页面呈现正常。由于@j-printemps 是第一个提出解决方法的人，我接受了他的回答。谢谢！

【解决方案2】：

不幸的是，我最好的猜测是，加载时，方向属性可能会干扰 jQuery 的遍历功能。 this repo search 中可能对此有一些提示。

一种解决方法是在加载页面后设置属性或css规则：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html">
    <script type="text/javascript">
        window.onload = function() {
            document.documentElement.dir = 'rtl';
            // or
            document.documentElement.style.direction = 'rtl';
        }
    </script>
</head>

<body>
    <h1>Blank screen test</h1>
    <div style="padding: 50%; background-color: orange;">Hey</div>
    <script src="./blanktest_files/jquery-1.11.1.js"></script>
</body>

</html>

【讨论】：

此解决方法不会影响空白页行为。 :-(
我已经检查了 jquery repo 指针——那里的结果似乎与空白页问题没有任何关系。我的猜测是它与 Chrome 呈现页面的方式有关，而不是与 jquery 有关。即，Chrome 加载了枪，jquery 只是按下了扳机。 :-)

【解决方案3】：

设置async 属性为我解决了这个问题（不像你把script 放在最后，还有很多东西需要解析）。

所以替换

<script src="https://code.jquery.com/jquery-1.11.1.js"></script>

与

<script src="https://code.jquery.com/jquery-1.11.1.js" async></script>

【讨论】：

这确实降低了该错误的频率，但它仍然出现在我的机器上大约 30% 的时间。

【解决方案4】：

在onload中插入代码：

<body onload="document.body.setAttribute('dir', 'rtl')">

dir 属性可以在其他元素中使用。示例：

<h1 dir="tld">TESTE</h1>

【讨论】：

谢谢。这与上面 j-printemps 的解决方案基本相同。
你是对的 re onload != .ready，但你的提议背后的想法是在页面加载后的某个时间点重新绘制页面，这是 @j-printemps 的精髓' 接受的解决方案。无论如何，感谢您发布答案！