3

Found an interesting way to make centered popup window ( http://www.w3.org/Style/Examples/007/center ) in application. Simple and good looking in code ( 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 only problem with render: depending on zoom level of the browser window, there is or horizontal or vertical sides are not sharp, smoothed/blured between 2 pixels... (chrome Version 39.0.2171.95 m , firefox 34.0.5 ) Here is an example(with smoothed left and right sides of the window):

enter image description here

As I figured out it is responsibility of the transform: translate(-50%, -50%) line. Anyone have met the same problem? Any solutions?

Super Babaca
  • 1,585
  • 2
  • 13
  • 15
  • I can't really see what you mean. Are you sure that it is not the box shadow that you are looking at? It is creating a very slight glow outside of the white modal window. – misterManSam Dec 17 '14 at 12:45
  • @misterManSam left and right borders of the div aren't as sharp as bottom and top. not precise "to the pixel" with 100% zoom. – Super Babaca Dec 17 '14 at 12:47
  • It looks like the issue is because of decimal values, in the fiddle i have used jQuery for positioning the content vertically and horizontally center by using `parseInt` [**fiddle**](http://jsfiddle.net/victor_007/6rwL0v0c/23/) – Vitorino fernandes Dec 20 '14 at 12:05
  • the idea is to remove any positioning code from js to css. i start to think that i failed in this pursuit... – Super Babaca Dec 20 '14 at 12:41
  • Here is another way to center popup window with pure css http://jsfiddle.net/Ikhtiyor/jhwmns2q/ – Ikhtiyor Dec 26 '14 at 12:42
  • hm, not bad. can you make an answer out of it, so i would prize you with some points? cheers! – Super Babaca Dec 26 '14 at 13:25

1 Answers1

3

Well, this is indeed a nice solution as it doesn't require you to know the width and height of positioning container. If you knew them you could just replace transform with apropriate negative margins:

margin-left: -90px; // half of the popup width
margin-top: -45px; // half of the popup height

Here's the fiddle, see if those issues still appear: http://jsfiddle.net/bcbpc6ey/

If they do, than the problem is probably caused by internal browser scaling algorithm and there is nothing you can do, because thats how the browser works.

However, if problem dissapears after switching transform to margins than you have probably experienced some antyaliasing issues that were caued by moving the rendering of your popup to GPU. Since transform is one of commonly known hardware accelerated CSS property, to make it run smooth browsers often move such elements into a separate layer that is than being handled entirely by GPU which is faster, but often causes some artifacts (mostly visible on fonts and scaled elements).

bwitkowicz
  • 779
  • 6
  • 15