Html 包含 jquery 和 dir=rtl 的页面在 chrome 上显示为空白

Question

在过去的几个月里，我目睹了一个奇怪的现象，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, and here is how it looks the instance scrolling starts.

Answer 1

不幸的是，我最好的猜测是方向属性在加载时可能会干扰 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>

Answer 2

添加 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>

Answer 3

属性 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>

Answer 4

在 onload 中插入代码：

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

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

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

Html 包含 jquery 和 dir=rtl 的页面在 chrome 上显示为空白

Html page with jquery and dir=rtl appears blank on chrome

html

jquery

google-chrome

right-to-left