[en] Internet Explorer, Chrome, Safari transform: skew aliasing aka jagged edges

Let’s say you have an HTML code as this one:

<section>
    <img src="gfx/slider1.jpg" alt=""/>
    <article class="container">
        Lorem ipsum dolor sit amet...
    </article>
</section>

and you skew it using CSS transforms (I’m using LESS):

section {
    position: relative;
    overflow: hidden;
    height: 740px;
    transform: skewY(-2.917deg);

    > img, > article {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    > article {
        transform: skewY(2.917deg);
    }
}

It works nicely in all modern browsers, but of course Internet Explorer must give you a headache by presenting jagged, aliased edge:

To force it to antialias the edge, just apply this little fix:

section > img {
    top: -1px;
}

and suddenly it looks like this:

Why? It seems IE antialiases only the transformed element’s edges, but does nothing for its contents. When image is moved beyond parent, skewed element — its antialiasing takes care of stuff.

If it has jagged edges in Chrome, Safari and other Webkit-based browsers, apply another fix:

section {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

3 myśli nt. „[en] Internet Explorer, Chrome, Safari transform: skew aliasing aka jagged edges

  1. Hi everyone , I’m Jack. Welcome to my website . I started writing in high school after a creative writing assignment for my English teacher. I did creative writing for several months before I thought about doing something else. I had always loved doing research assignments because I’m passionate about learning. When you combine writing skill with a love of learning, dissertation writing only makes sense as a job. I’m passionate about helping the students of the future in their school career. When they don’t have time for their paper , I am there to help.

    Jack Allison – Professional Academic Writer – //www.asaformat.com/]Asaformat Team

  2. My name is Cathy. And I am a professional academic writer with many years of experience in writing.

    My interest is to solve problems related to writing. And I have been doing it for many years. I have been with several groups as a volunteer and have assisted people in many ways. My love for writing has no end. It is like the air we breathe, something I cherish with all my being. I am a passionate writer who started at an early age. I’m happy that I`ve already sold several copies of my works in different countries like Canada and China and others too numerous to mention. I also work in a company that provides assistance to many people from different parts of the world. Clients always come to me because I work no matter how hard their projects are. I help them to save time, because I feel happy when people come to me for writing help.

    Academic Writer – Cathy Cornish – //www.fredsimpsonwriter.com/]Fredsimpsonwriter Confederation

  3. What’s up it’s me, I am also visiting this web page regularly, this web site is actually nice and the viewers are in fact sharing nice thoughts.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *