CODEWITHSUNDEEP
htmlcss
Tai
Tai

Reputation: 167

CSS translate 100% leaves different gap in different browsers

I am trying to use a CSS translate in conjunction with a CSS :before pseudoelement to create a partial hover overlay that pops up on mouseover. The problem that I'm seeing is that the pseudoelement is positioned differently depending on whether this is viewed in Chrome/Firefox or IE(11).

I figure the easiest way to show what I'm talking about is with a stripped down fiddle:

http://jsfiddle.net/YMCjL/3/

In Chrome there is a small 1 pixel gap between the images (blue border) and the overlay (red border). This means that when the overlay is moved up using translate, the bottom red border does not fully overlap the bottom blue border which is what I would like it to do. Now this is easily fixed with a "bottom: 1px" attribute on the :before pseudoelement but I'd like to understand why the gap occurs in the first place.

In IE the effect is even more pronounced, where the gap is 5px.

Short of adding IE specific CSS to compensate for the difference, I'm not sure how to best fix this. The only thing that seems to make the two browsers consistent is to remove the "vertical-align: bottom" line from the img.screenshot class. Unfortunately this leaves a gap between the bottom of the images and the containing div, so the top of the :before element is visible when the containing div is set to "overflow:hidden".

Thanks for any light you can shed on this!

HTML:

<article>
    <div class="screenshots">
        <a href="photo" target="_blank" class="sslink"><img src="images/photo1_s.jpg" class="screenshot"><img src="images/photo2_s.jpg" class="screenshot"><img src="images/photo3_s.jpg" class="screenshot"></a>
    </div>
    <div class="description">
        some content
    </div>
</article>

CSS:

a {
    position: relative;
}

.screenshots {
    /* overflow: hidden; */ 
}

img.screenshot {
    vertical-align: bottom;
    width: 32%;
    margin-left: 2%;
    border: 3px solid blue;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
img.screenshot:first-child {
    margin-left: 0;
}

a.sslink:hover {
    padding: 0;
    margin: 0;
    margin-right: 2%;
    background: none;
}
a.sslink:last-child:hover {
    margin-right: 0;
}

a.sslink::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding-top: 1.2em;
    padding-bottom: 1.2em;
    background: rgba(255,255,255,0.5);
    border: solid 3px red;
    content: 'Launch website';
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: -webkit-transform 0.25s;
    -moz-transition: -moz-transform 0.25s;
    transition: transform 0.25s;
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%);
}

a.sslink:hover::before,
a.sslink:focus::before {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}

Upvotes: 0

Views: 2204

Answers (1)

Sheepish
Sheepish

Reputation: 71

I'm not sure why but setting your link to be block-level seems to fix it:

a.sslink {
    display: block;
    position: relative;
}

http://jsfiddle.net/YMCjL/8/

Upvotes: 2

Related Questions