Chrome shows blank page on RTL language site until window is resized

问题

I just created an Arabic version a website and noticed that Chrome sometimes shows a totally blank page until the window is resized and then everything instantly becomes visible.

Arabic is a RTL language, so the <html> tag has dir="rtl" lang="ar" added to it. This is the only difference between it and the English site.

This is the site. You may have to click the logo a few times in order to see it show blank.

回答1:

I've noticed this problem too and I searched the internet in English and Arabic but couldn't find the cause of the problem. I found a workaround to fix it though; use the following jQuery script in your rtl-directed webpages:

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

All it does is that it scrolls the page by only 1px right after all the page elements have been loaded. You can add a code that scrolls it back if you want.

回答2:

I fixed this problem and I want to share it with you.I think this problem is only for gc on mac os. How to fix it?its really easy. hide you body in your css and then show it when page load and every thing will work.

/*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()
});

回答3:

The link to the page does not work. Is the page available on the futurism site?

I downloaded the futurism.com page and added dir="rtl" lang="ar" to the html tag. I have reloaded the page 50 times. I cannot reproduce the problem.

My copy of the page is running on Apache with Multiviews.

I have added a language directive for Arabic.
I have two copies of the file, futurism.htm.en and futurism.htm.ar
I have set the language in my browser to Arabic [ar].
The Arabic pages is negotiated by Apache.

The page loads without a problem.

I have also created another page with Unicode Arabic letters. It loads and displays the Arabic right-to-left without a problem.

回答4:

I had the same problem.

Just don't apply direction to the body or html tags.

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

回答5:

I had a similar problem to yours but my site showed fine until it was manually refreshed on Android phones, after which the page would go blank. This behaviour could also be reproduced in developer tools on Chrome and Opera (both use the Blink engine).

First, I applied a fixed positioning rule to the body,

body { position: fixed; }

Then, I reverted the positioning on page load using jQuery,

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

回答6:

Wordpress became really annoying when working on RTL, you need to resize or scroll to show content. I think it is only happening on MacOS.

I've noticed that some websites don't have this issue, so comparing the html I noticed that the working websites have many class in the <html>, like: js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation... which added by modernizr.js (v2.8.3)

I added this to my page header, and the blank page issue disappeared:

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

I am not sure what is going on, but may be it will give some starting point to figure out the real cause of the issue.

回答7:

I have this issue with my Wordpress and I fixed it by adding this javascript code

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

来源：https://stackoverflow.com/questions/34184377/chrome-shows-blank-page-on-rtl-language-site-until-window-is-resized

标签

google-chrome

arabic