Search code examples
htmlgoogle-chromeright-to-leftpacketparagraph

Problem with Chrome Right-To-Left Paragraphs

I've started noticing this Chrome problem recently: Some paragraphs inside a table-cell within a right-to-left div - are randomly displayed left-to-right. The slower the server, the more it happens (I couldn't reproduce the problem locally), and the problematic paragraphs change upon refreshing the page.

Here is a piece of HTML that demonstrates the issue:

<html>
  <body>
    <div style="direction:rtl;">
      <table><tr><td>

<p>
long paragraph
</p><p>
another long paragraph
</p><p>
 . . .
 . . .
</p><p>
last long paragraph
</p>

      </td></tr></table>
    </div>
  </body>
</html>

You can see a live demo here: http://gioms.com/zzztest.html (don't forget to refresh several times)

Any solution to this?

EDITED:

The problem is reproducible. You still need a server (which may be local), and you can set Chrome to simulate slow connection by using the "Developer tools" (F12) with creating and using a "Throttle" in the "Network" tab / "Online" sub-tab (e.g., 30 Kb/s with 0 latency).

Also no need for an HTML "table".

Apparently the problem occurs in paragraphs on a packet boundary. See https://youtu.be/RG8uO0OqUnY for a video capturing the phenomenon.

Solution

  • After struggling with this for a few days, I've found a workaround, by refreshing all paragraphs locally after everything is loaded:

    <html>
  <head>
    <script>
    function refreshParagraphs() {
      var paragrahpContent;
      var paragraphs = document.getElementsByTagName("P");
      for (i = 0; i < paragraphs.length; i++) {
        paragrahpContent = paragraphs[i].innerHTML;
        paragraphs[i].innerHTML = paragrahpContent;
      }
    }
    </script>
  </head>
  <body onload="refreshParagraphs();">
    <div style="direction:rtl;">

<p>
long paragraph
</p><p>
another long paragraph
</p><p>
 . . .
 . . .
</p><p>
last long paragraph
</p>

    </div>
  </body>
</html>