Chrome Rendering Artifacts on Retina Screen

Question

I've been developing a large single page application and in the process have run across a series of rendering artifacts, all of which are specific to chrome. My version of chrome is the most up to date as of this post: Version 39.0.2171.95 (64-bit). Both of these only happen on my macbook pro retina monitor, if I move the window either partially or fully to another monitor, the part that is on that monitor no longer shows the artifact (after chrome repaints) Such a first world problem I know...

My gut is telling me that if I tweak a certain CSS property or go about something slightly different, I can avoid these issues, but everything I've tried has failed. So I look to you wise members of the stack community, gather 'round and hearken to my tales:

First Artifact: Simple hide show fails hard in a seemingly random but highly reproducible way.

Check these three images, one is not like the other!

Each little icon at the top hides or shows a different div. They're all equivalent, just show a different number of those traffic related icons. The middle one will not show up only when i first click the left one (one with all the cars). I think it has to do with the fact that the one with all the cars has a scroll bar. If I then go into chrome inspector and like check or uncheck pretty much any property about it, chrome repaints it just fine. Again this all works on a different monitor/literally any other browser (including ie8) so it's not some dumb coding bug.

Second Artifact: When I scroll, a fixed div at the bottom of my page gets cut and moves with the page.

Notice that the blue bar gets cut! The blue bar has CSS as follows:

position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
border: 1px solid #777777;
background-color: #e5f1f8;
z-index: 15;

It doesn't even get cut right where there is some sort of divider in the html. There is no element at at the line of the cut, the only nearby element is the white box (and there's no like padding or margin from that white box.. it's literally getting cut randomly in space)

Any help would be appreciated. This is a huge pain when all we have to demo is our retina screens.

Answer 1

Just had someone else on SO with issues getting elements to render correctly on Chrome with a Retina display too: How can I remove the single pixel space between these elements on retina displays?

It looks like Chrome on a Retina display may have some rendering engine issues when it comes to rendering page elements. You can confirm whether its an Engine issue by seeing if the same issue occurs in the latest version of Opera, as it uses the same Blink rendering engine as Chrome (separate fork from Webkit that Safari uses).

If its an engine issue, you may be limited in your options to fix the issue until Google releases a fix. Otherwise there may be a mad genius on here who can work around the problem.

Best of luck :)

Answer 2

As for the position fixed bar try editing the css to this

position: fixed;
bottom: 0px;
width:100%; /* or whatever your width is */
height:50px; /* or whatever your height is */
border: 1px solid #777777;
background-color: #e5f1f8;
z-index: 15;

As for the display problem, if it works fine on other webkit browsers that usually indicate that there is an issue with the browser itself and you can't do anything about it except maybe make a rule for the screen size that is having the display issue, to show the website or app in a different style or maybe zoom in or out?

Anyways best of luck with your problem