Html page with jquery and dir=rtl appears blank on chrome
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>
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>
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>