9

In the past few months I've witnessed a strange phenomenon, where Chrome loads a web page, and is not displaying anything until I start to scroll. At first I thought this was a problem with the site, then a glitch in some recent version of Chrome, but now I think that it is related to some conflict between jquery and rtl. The following example displays a blank page until I start to scroll:

<!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>

This does not always occur, but it happens quite consistently on my machine (e.g., ~70% of the refreshes). Make sure that the developer tools are closed - for some reason it does not happen when they are open.

Removing the dir="rtl" prevents this from happening.

Removing the <script src="https://code.jquery.com/jquery-1.11.1.js"></script> also prevents this from happening.

Not sure what to make of it. Does anybody else see this happening? Any ideas how to solve this?

(BTW, I'm using Chrome 58.0.3029.110 (64-bit) on Mac OS 10.12.5)

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.

Roy Sharon
  • 3,488
  • 4
  • 24
  • 34
  • Please link an example page with your issue. – Loenix May 28 '17 at 09:10
  • Added a link to an example page. – Roy Sharon May 28 '17 at 11:15
  • Hmm, I cannot reproduce this at all. The example works just fine. I am using the same Chrome version as you. – Ian Devlin May 30 '17 at 09:54
  • I can totally reproduce this locally with chrome 58.0.3029.110 (same version as OP) The [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) attribute shouldn't lead to any 'unexpected' behaviour in any modern browser, so I guess the problem lies with jQuery. A [quick search](https://github.com/jquery/jquery/search?utf8=%E2%9C%93&q=dir&type=) makes me guess if those tests will fail under chrome when the `` is set to `rtl`. – The F May 30 '17 at 10:04
  • @RoySharon works fine for me as well. you could try checking if any chrome extensions are causing the problem or either if hardware acceleration is causing the problem. – King Reload May 30 '17 at 10:04
  • 2
    Seems like a Heisenbug – Omri Luzon May 30 '17 at 10:09
  • My answer was a bit premature ;) interestingly this happens also when you remove the `dir` attribute completely and try to set the direction via css `html { direction: rtl; }` – The F May 30 '17 at 10:20
  • Works fine. Absolutely no issues. – Milan Chheda May 30 '17 at 10:36
  • Yes works fine no issues i can see direct orange background without scrolling – ImBhavin95 May 30 '17 at 10:37
  • Works fine for me. But I know the problem with blank pages. I see them from time to time until I scroll (doesn't matter which website). – modsfabio May 30 '17 at 10:58
  • @RoySharon can you send a screenshot of how the page appears on your end ? – ProllyGeek May 30 '17 at 14:45
  • @ProllyGeek added links to screen captures of before and after scrolling. – Roy Sharon May 31 '17 at 06:09
  • I suggest try with the basics, make sure you've cleared cache and there are no stored cookies. Sometimes they are a cause of trouble. – Ashish Bahl May 31 '17 at 06:18
  • @Ashish Bahl apart from not working (I tested), this is not a practical solution. I cannot expect all of my site's users to clear their caches and have no stored cookies. – Roy Sharon May 31 '17 at 06:37
  • I have tested that with chromium (same version) on Ubuntu and it works fine. What OS are you on? – philipp May 31 '17 at 06:44
  • I'm using Mac OS 10.12.5 – Roy Sharon May 31 '17 at 06:59
  • I couldn't reproduce it on the same OS and Chrome version. Have you tried opening in an anonymous tab? It can also be caused by Chrome plugins you might have enabled. – EternalLight May 31 '17 at 07:57
  • Tried it in incognito with no plugins, still blank until scroll. – Roy Sharon May 31 '17 at 08:04
  • 1
    @RoySharon I can afford couple of hours on team viewer to examine the exact issue on your side, and help solving it. Please feel free to add me on skype: prollygeek – ProllyGeek May 31 '17 at 13:20
  • 1
    It looks like [issue 707542](https://bugs.chromium.org/p/chromium/issues/detail?id=707542) reported in Chromium. Another discussion on that problem (or a very similar one) is found in [that post from 2015](https://stackoverflow.com/questions/34184377/chrome-shows-blank-page-on-rtl-language-site-until-window-is-resized). – ConnorsFan May 31 '17 at 20:21
  • 1
    @ConnorsFan good catch! Thanks. Indeed looks like the same issue. This was marked as fixed on April 21st 2017, so according to the Chromium release schedule (https://www.chromium.org/developers/calendar) it should be released in version 60, which was scheduled for May 25th 2017 (stable version on July 26). I will download this version and see if the bug still persists. – Roy Sharon Jun 01 '17 at 08:35
  • @ProllyGeek Thanks much! Greatly appreciated. I want to check version 60 first, and then decide how to proceed. But thank you very much, what a great community! – Roy Sharon Jun 01 '17 at 08:38
  • 1
    Seems like this issue was solved in version 59 of Chrome. I've downloaded the beta (59.0.3071.82 (Official Build) beta (64-bit)) and I can confirm that the blanktest url above renders okay. Tried it about 50 times and it works just fine. So the bug may be solved. Thanks @ConnorsFan for the pointer! – Roy Sharon Jun 01 '17 at 10:45

4 Answers4

2

My best guess, unfortunately, is that the direction attribute might mess with jQuery's traversing functionality when loaded. Might be some hints on that in this repo search.

One workaround is to set the attribute or css rule after loading the page:

<!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>
The F
  • 3,647
  • 1
  • 20
  • 28
  • This workaround does not affect the blank page behavior. :-( – Roy Sharon May 31 '17 at 06:13
  • I've checked the jquery repo pointer - none of the results there seem to have any bearing on the blank page problem. My guess is that it relates to the way Chrome renders the page and not to jquery. I.e., Chrome loaded the gun, jquery just pressed the trigger. :-) – Roy Sharon May 31 '17 at 07:39
2

The attribute dir can be overriden by CSS direction: rtl;, when it comes to content presentation:

As the directionality of the text is semantically related, I suggest you add dir='rtl' in Javascript when jQuery is loaded. That way, dir is not interfering with jQuery when the page is loading.

<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>
j-printemps
  • 1,288
  • 11
  • 21
  • Thank you for this suggestion! It works on my machine. I ask other readers to test this and see if it is also working for them: http://roysharon.com/blanktest2.html – Roy Sharon May 31 '17 at 06:29
  • Thank you for editing the snippet. But I think you need to add the CSS in the example. This would avoid having the text being on the left while the JS is loading, and ensure that your content has the right direction. – j-printemps May 31 '17 at 06:40
  • Well, adding the css causes the problem to appear again. This is why I took it out here: http://roysharon.com/blanktest2.html – Roy Sharon May 31 '17 at 06:51
  • To avoid showing the page when the dir is still ltr, we can add `style="display:none"` to the html tag, and then change the onready func to `$(function() { $('html').attr('dir', 'rtl').show(); })` – Roy Sharon May 31 '17 at 06:54
  • I see, so it's a problem with the css property, not the html attribute. I actually tried with all the browsers I have (Mac and Windows VMs), but I can't reproduce your issue. – j-printemps May 31 '17 at 07:00
  • Quick question, have you tried putting `dir='rtl';` in the `` instead for the `` tag ? – j-printemps May 31 '17 at 07:03
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/145515/discussion-between-j-printemps-and-roy-sharon). – j-printemps May 31 '17 at 07:04
  • 1
    It seems that Chrome version 59 includes a fix to this issue (https://bugs.chromium.org/p/chromium/issues/detail?id=707542). Just downloaded the beta and the blanktest page renders fine. Since @j-printemps was the first to propose a working workaround, I'm accepting his answer. Thanks! – Roy Sharon Jun 01 '17 at 10:49
0

Putting the async attribute solved the problem for me (not like there is much left to parse as you put the script at the end).

So replace

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

with

<script src="https://code.jquery.com/jquery-1.11.1.js" async></script>
Adam
  • 1,342
  • 7
  • 15
0

Insert code in onload: 

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

dir attribute could be utilized in others elements. Exemple:

<h1 dir="tld">TESTE</h1>
Mateus Veloso
  • 144
  • 9
  • Thanks. This is essentially the same as j-printemps' solution above. – Roy Sharon Jun 01 '17 at 10:37
  • You are right re onload != .ready, but the idea behind your proposal is to cause a redraw of the page at some point after the page had loaded, which is the essence of @j-printemps' accepted solution. In any case, thanks for posting an answer! – Roy Sharon Jun 02 '17 at 04:58