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

Question

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.

The link to the site is broken: The site you were looking for, http://arabic.futurism.com/, does not exist. — downeyt, Jan 28 '16 at 17:54
@downeyt - Whoops sorry, the domain has since change to motf.futurism.com — jetlej, Jan 29 '16 at 19:26

score 7 · Answer 1 · answered Mar 19 '16 at 19:32

7

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.

answered Mar 19 '16 at 19:32

Bashar Ghadanfar

69
1
3

I don't think this would fix it because manually scrolling doesn't fix the issue. Only resizing the window fixes it for me. Also, if you scroll while the page is still loading, this code will scroll the user back to the top once the document is ready. Bad UX. – jetlej Mar 21 '16 at 13:46
I've been facing the same issue on Chrome where on the first load the interface stays blank and appears only when you move it (i.e. either by scrolling, zooming or re-sizing). Like I said, this script does not handle the cause of the problem, it just moves the page; a simple workaround for this Chrome issue until the culprit is found. Do you have a link to where the problem exists? I could take a look at it if you like. – Bashar Ghadanfar Mar 23 '16 at 15:06
Works great for me. – elifiner Aug 02 '16 at 18:37
have you found the cause of the problem ? – Mounir Elfassi Apr 01 '17 at 00:00

score 4 · Answer 2 · answered Mar 26 '17 at 07:16

4

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

answered Mar 26 '17 at 07:16

Alisanie

81
5

1

This fixed it for me. Thank you! – larapsodia May 01 '17 at 02:48
This fixed a similar issue for me too. However, I had to delay `$("body").show()` function with `Window setTimeout()` (10ms) to get it to work perfectly. – W.M. Aug 17 '17 at 17:07

score 1 · Answer 3 · answered Jan 28 '16 at 18:53

1

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.

answered Jan 28 '16 at 18:53

downeyt

1,206
2
12
23

@jetlej - I went to the site, and noticed no blank load until resize. I cleared my cache each time, about six times total. Your issue, though, I *have* noticed with Chrome before on other pages I've made - very rarely - but it was always a Chrome issue that went away on next reboot for me. – Jason Jan 29 '16 at 19:48
I've got the same issue but only appeared on Android Chrome app (and also emulating a mobile device in desktop Chrome Developer Tools). Anyway, your answer is not a solution to the OP's question. – campsjos Apr 21 '17 at 11:15

score 1 · Answer 4 · answered Apr 28 '16 at 19:57

1

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>

answered Apr 28 '16 at 19:57

Farzin

27
1
4

1

that's exactly what W3 tutorials recommended not to do. – res Apr 06 '17 at 09:28

wesamly · Answer 5 · 2017-04-23T09:04:36.357

1

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.

edited Apr 23 '17 at 09:04

answered Apr 06 '17 at 15:21

wesamly

1,484
1
16
23

I'm having the same issue, but unfortunately this did not work for me. :-( – larapsodia May 01 '17 at 02:41
do you have it online? – wesamly May 02 '17 at 08:56

Amin Mozafari · Answer 6 · 2017-04-14T12:51:43.947

1

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'); });

edited Apr 14 '17 at 12:51

answered Apr 14 '17 at 12:43

Amin Mozafari

149
4

Worked for me, but using `html` instead of `body` – campsjos Apr 21 '17 at 11:10

score 0 · Answer 7 · answered Jun 01 '17 at 09:50

0

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

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

answered Jun 01 '17 at 09:50

Zuhair Ali

597
1
5
18

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

7 Answers7

Linked