How can I remove the single pixel space between these elements on retina displays?

Question

enter image description here http://jsfiddle.net/36ykrp9x/5/

HTML

<div class="container">
     <button>O</button><button>O</button>
</div>

CSS

.container {
    width: 100%;
    background-color: rgb(120, 200, 200);
    text-align: center;
}
button {
    border: 0;
    width: 3rem;
    height: 3rem;
    opacity: 0.8;
    background-color: gray;
}

This above code best captures the visual bug I am interested in solving. I should note that this does not appear to affect Firefox or Safari's latest versions. I am currently on Chrome 39. If you are on a retina display and a recent version of Chrome and do not already see the thin line between the elements, try resizing the window a bit. A thin line between the buttons will flicker in and out of presence.

For my purposes, there is at least one element above the button group in the hierarchy with 100% width, and the buttons must be horizontally centered within it. The buttons themselves must have opacity between 0 and 1. They can be divs, or any other element for that matter - but I have indeed tried others and found the problem remains.

Unfortunately, centering the button group within a fixed-width element doesn't appear to solve this issue for me, as the fixed-width button group must ultimately also be centered somehow which appears to resurrect the issue. Nudging with margins can lead to overlapping which is more obvious with elements that have such opacity - which is really no better than having the gap in the first place.

It is worth noting that indeed using background-color: rgba(r,g,b,a) addresses the problem for most intents and purposes, but I am very interested in resolving this without it if only to see that it's possible.

I am not particularly interested in solutions that involve JavaScript. Am I out of luck?

Is it only problem in retina display???? Please share a picture... — Bhojendra Rauniyar, Jan 16 '15 at 04:25
The problem is only on retina displays. A photo of the jsfiddle is now included in the OP. — Reno, Jan 16 '15 at 04:29

score 2 · Accepted Answer · answered Jan 16 '15 at 05:54

Based on the information you provided, and my own experience with Google Chrome, I'm led to the suggestion that this is a browser bug in Chrome, considering it only occurs in Chrome on a Retina screen, and other browsers such as Safari and Firefox do not exhibit the problem. Your HTML and CSS looks perfect so I don't see issues here.

You can verify that this is a browser rendering issue by also checking this in a latest version of Opera (on your Retina display), as Opera now uses the same Blink rendering engine as Chrome (which is forked from Webkit). If Opera exhibits the same issue then its a Engine issue which should be logged as a bug.

Unless someone else figures out a way around it, I am normally inclined to leave browser rendering bugs like this alone where possible so that you're not hacking code in your site, and when the bug is fixed, you don't have to do anything to your site.

score 1 · Answer 2 · answered Feb 03 '15 at 10:14

The problem is with jsfiddle.net. I have the same 1 pixel space in Chrome 40 on retina. Try this: http://dabblet.com/gist/c0068a79fc0268482ee1 or the following code, loaded directly:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {
    width: 100%;
    background-color: rgb(120, 200, 200);
    text-align: center;
}
button {
    border: 0;
    width: 3rem;
    height: 3rem;
    opacity: 0.8;
    background-color: gray;
}    
</style>
</head>

<body>
  <div class="container">
     <button>O</button><button>O</button>
  </div>    
</body>
</html>

How can I remove the single pixel space between these elements on retina displays?

2 Answers2