Discovered a clever technique for creating a centered popup window in an application ( http://www.w3.org/Style/Examples/007/center ). Neat and simple code implementation ( http://jsfiddle.net/babaca/6rwL0v0c/22/ ).
html
<div class="__holder">
<div class="__box">
<h2>Some header</h2>
Some bunch of content etc
</div>
</div>
css
.__holder {
position: fixed;
z-index: 15000;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}
.__box {
position: absolute;
z-index: 16000;
top: 50%;
left: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-right: -50%;
padding: 0;
transform: translate(-50%, -50%);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #fff;
-webkit-box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
-moz-box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
padding: 29px;
}
The issue with rendering arises when the browser window is zoomed in or out, causing either the horizontal or vertical edges to appear blurred between pixels. (chrome Version 39.0.2171.95 m , firefox 34.0.5 ) Here is an example(with blurred left and right edges of the window):
After investigating, it seems that the culprit is the transform: translate(-50%, -50%) line.
Has anyone encountered this problem before? Any solutions?