CODEWITHSUNDEEP
cssinternet-explorertransform
Godwin
Godwin

Reputation: 9907

Off by one pixel issue in IE CSS transform

I am using transform: skew to create the effect of a down arrow on my banner image using both the :before and :after tags. The result should look like the following:

Expected result

However, in IE 9-11 there seems to be a rounding issue. At some heights there is one pixel from the background image that shows below the skewed blocks resulting in the following:

Actual result

In my case, the banner is a percentage of the total height of the window. Here is the some sample code which should be able to reproduce the problem:

HTML

<div id="main">
    <div id="banner"></div>
    <section>
        <h1>...</h1>
        <p>...</p>
    </section>
</div>

CSS

#banner {
    position: relative;
    background-color: green;
    width: 100%;
    height: 75%;
    overflow: hidden;
}

#banner:before,
#banner:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 1.5em;
    background-color: #FFFFF9;
    transform: skew(45deg);
    transform-origin: right bottom;
}

#banner:after {
    right: 0;
    transform: skew(-45deg);
    transform-origin: left bottom;
}

body {
    background-color: #333;
    position: absolute;
    width: 100%;
    height: 100%;
}

#main {
    max-width: 40em;
    margin: 0 auto;
    background-color: #FFFFF9;
    position: relative;
    height: 100%;
}

section {
    padding: 0 1em 5em;
    background-color: #FFFFF9;
}

And here a working example.

Upvotes: 4

Views: 1288

Answers (1)

C3roe
C3roe

Reputation: 96326

Yes, seems to be a rounding issue – and I don’t know of anything that one could do to fix this. It’s in the nature of percentage values that they don’t always result in full pixel values – and how rounding is done in those cases is up to the browser vendor, I’m afraid.

I can only offer you a possible workaround (resp. “cover up”) that seems to work – if the layout really is as simple as this, and the main content area has a white background, and no transparency or background-image gets involved there.

Pull the section “up” over the banner by a negative margin of -1px (eliminated top margin of h1 here as well, otherwise it adjoins with the top margin of the section – countered by a padding-top), so that its background simply covers up that little glitch:

section {
  padding: 1em 1em 5em;
  background-color: #FFFFF9;
  position:relative;
  margin-top:-1px;
}    
section h1:first-child { margin-top:0; }

Well, if you look closely, that makes the corner of triangle look slightly “cut off” (by one pixel) in those situations where the rounding glitch occurs – if you can live with that (and your desired layout allows for it), then take it :-) (And maybe serve it to IE only by some means). If not – then sorry, can’t help you there.

Upvotes: 2

Related Questions