Strange inconsistent rendering in Google Chrome

Question

When I view this webpage in Chrome

https://www.doctle.com/users/feedback/

it renders inconsistently.

Problem is with the Login Widget in the top right corner. Sometimes its rendered as expected and if I refresh it sometimes its not floated properly.

To reproduce the erratic behavior just refresh the page repeatedly and you can see the inconsistency.

[Erratic Render] - https://www.doctle.com/error.jpg

Please help. The screenshot is of the same page with out any differences on the server side files. I verified in Firefox and this inconsistency is not there. Open the page in Firefox for reference.

Thanks in advance.

jpg doesn't exist anymore. – Yannis Dran Jan 24 '14 at 16:34 — Yannis Dran, Jan 24 '14 at 16:34

score 5 · Accepted Answer · answered Aug 19 '11 at 23:54

This is a possible solution to the problem. When I run Chrome's Audit tool found in the developer tools, I get the following (among a few other things that shouldn't be the cause of this issue):

Optimize the order of styles and scripts (2)

The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.

simple-image-link.css
style.css

Basically it's loading your style sheets out of order and that's what may be causing the problem.

This solution did the trick and now the rendering is consistent. Thanks a lot Joseph. — Praveen, Aug 21 '11 at 06:47

score 0 · Answer 2 · answered Jan 06 '14 at 20:28

I found another factor that can contribute to inconsistent rendering in Chrome... Whitespace!

I had a horizontal row with three boxes in it that would exactly fill the width of the row, and every now and then Chrome would make the third box wrap to the next line, even though theoretically it would fit. After closer inspection I saw that there were a couple of extra pixels in between the first and the second box in these instances... From past experience I knew this might be related to whitespace, so I removed all whitespace between the open and close tags of the three boxes. I changed:

<div class="row">
   <div class="box">
      Some box content...
   </div>
   <div class="box">
      Some box content...
   </div>
   <div class="box">
      Some box content...
   </div>
</div>

To:

<div class="row"
   ><div class="box">
      Some box content...
   </div
   ><div class="box">
      Some box content...
   </div
   ><div class="box">
      Some box content...
   </div
></div>

Notice how I moved the closing angular brace of the closing divs to the next line, making sure there is no whitespace at all between the closing and opening tags. This problem is very old actually, but mostly when it bites you it will bite you consistently. Only in Chrome have I seen this inconsistent behavior.

I know this question is answered already, but it ranks very high in Google when searching for "inconsistent rendering Chrome" and the suggested answer did not fix the issue for me, so, after having finally found the solution in my situation, I thought it would be good to add it here for others having the same issue.

score 0 · Answer 3 · answered Aug 20 '11 at 22:51

0

You have

#headerbar {
    float: right;
    clear: right;
    margin: 0px;
    padding: 0px;
    display: inline;
    height: 112px;
}

A floating element is block, you specify it inline, and you try to define its height. I sugger you to read the doc to learn how CSS boxes works.

answered Aug 20 '11 at 22:51

MatTheCat

18,071
6
54
69

Thank you for taking time and looking through the stylesheet. Even though this is not the show stopper, I will clean up my stylesheet as per your suggestion. Thank you Mat!! – Praveen Aug 21 '11 at 06:49

Strange inconsistent rendering in Google Chrome

3 Answers3

Linked