Question

我刚刚创建了一个阿拉伯语版本的网站，并注意到Chrome有时会显示一个完全空白的页面，直到调整窗口大小，然后一切都立即可见。

阿拉伯语是一种RTL语言，因此<html>标记添加了dir="rtl" lang="ar"。这是它与英文网站的唯一区别。

This is the site。您可能需要多次单击徽标才能看到它显示为空白。

Answer 1

我也注意到了这个问题，我用英语和阿拉伯语搜索了互联网，但无法找到问题的原因。我找到了一个解决方法来修复它;在rtl指导的网页中使用以下jQuery脚本：

//Chrome RTL UI Issue Fix
$(document).ready(function(){
    $(window).load(function() {
        $( "body" ).animate({
            scrollTop: 1
        });
    });
});

所有这一切都是在加载了所有页面元素后立即仅向1px滚动页面。如果需要，您可以添加一个将其滚动回来的代码。

Answer 2

我解决了这个问题，我想与你分享。我认为这个问题仅适用于mac os上的gc。如何解决？它真的很容易。将你的身体隐藏在你的css中，然后在页面加载时显示它，并且每件事都能正常工作。

/*Add this to your css to hide body */
body {
    display: none;
}

<!-- Add to your html to js file to show your body again -->
  $(window).load(function() {
  // When the page has loaded
  $("body").show()
});

Answer 3

页面链接不起作用。该页面是否在未来主义网站上提供？

我下载了futurism.com页面，并在html标记中添加了dir="rtl" lang="ar"。我已经重新加载了50次页面。我无法重现这个问题。

我的页面副本在带有Multiviews的Apache上运行。

我添加了阿拉伯语的语言指令。
我有两份文件，futurism.htm.en和futurism.htm.ar
我已将浏览器中的语言设置为阿拉伯语[ar]。
阿拉伯语页面由Apache协商。

页面加载没有问题。

我还创建了另一个带有Unicode阿拉伯字母的页面。它从右到左加载并显示阿拉伯语，没有问题。

Answer 4

我遇到了同样的问题。

请勿对body或html标记应用方向。

<html>
    <head>
        <style>
            .rtl {
                direction: rtl;
            }
        </style>
    </head>
    <body>
        <div class="rtl">
            <!-- Your Codes Here ... -->
        </div>
    </body>
</html>

Answer 5

Wordpress在使用RTL时变得非常烦人，您需要调整大小或滚动以显示内容。我认为它只发生在MacOS上。

我注意到有些网站没有这个问题，所以比较html我注意到工作网站在<html>中有很多类，如：js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation ... 由modernizr.js（v2.8.3）

添加

我将此添加到我的页眉，并且空白页问题消失了：

<script src="/js/modernizr.js"></script>

我不确定发生了什么，但可能会给出一些起点来找出问题的真正原因。

Answer 6

我遇到了类似的问题，但我的网站显示正常，直到在Android手机上手动刷新，之后页面将变为空白。此行为也可以在Chrome和Opera上的开发人员工具中重现（两者都使用Blink引擎）。

首先，我将一个固定的定位规则应用于身体，

body { position: fixed; }

然后，我使用jQuery恢复了页面加载的定位，

jQuery(window).load(function() { jQuery('body').css('position','static'); });

Answer 7

我的Wordpress有这个问题，我通过添加这个javascript代码来修复它

window.scrollTo(0, 1);
window.scrollTo(0, 0);

Chrome会在RTL语言网站上显示空白页面，直到调整窗口大小

7 个答案: