How can I remove one pixel space between these elements on retina displays?
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 reflects the visual error that I am interested in solving. I must point out that this does not affect the latest versions of Firefox or Safari. I am currently in Chrome 39. If you are on a retina screen and the latest version of Chrome and still don't see the thin line between the elements, try resizing the window a little. The thin line between the buttons will flicker and be missing.
For my purposes, there is at least one element above the button group in the hierarchy with 100% width and the buttons should be horizontally centered within it. The buttons themselves should have an opacity between 0 and 1. They could be divs or any other element for that matter, but I've actually tried others and found the problem persists.
Unfortunately, centering a group of buttons on a fixed width element doesn't seem to solve this problem for me, as a group of buttons with a fixed width must end up being centered as well, which seems to resurrect the problem. Nudging with margins can result in overlap, which is more obvious with elements that have this kind of opacity, which is actually no better than having white space in the first place.
It's worth noting that actually using background-color: rgba (r, g, b, a) solves the problem for most purposes and purposes, but I'm very interested in resolving this without it, if I can see that it's possible.
I'm not particularly interested in solutions that use JavaScript. Am I lucky?
source to share
Based on the information you provided and my own experience with Google Chrome, I have led me to assume that this is a browser bug in Chrome as this only happens in Chrome on Retina screen and other browsers such as Safari and Firefox issue. Your HTML and CSS looks perfect so I don't see any problem here.
You can check if this is a browser display issue by also checking this in the latest version of Opera (on your Retina display) as Opera now uses the same Blink rendering engine as Chrome (which forks from Webkit). If Opera exhibits the same problem, then its an engine problem that should be logged as a bug.
Unless someone else is figuring out how to do this, I usually tend to leave browser errors like this whenever possible so you don't hack the code on your site and when the bug is fixed you shouldn't do anything on your site ...
source to share
The problem is at 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 downloaded 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>
source to share