Menu
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.
408
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
