Browser Anti-Aliasing (smooth lines) [duplicate]

Question

In my slider, I have the problem, that after my fading-effect ends, a part of my rotated container looks like a step. I can provide an example here:

http://lamit.webflow.com

As you can see in the slider, during the effect, the bottom of my text-bar is smooth. After the transition however, it looks strange.

Any Idea on how to get rid of that?

Update

Since this site is done in webflow, there are some css-errors while analyzing the code (due to some preventions from webflow).

The relevant code is below:

CSS

.mask {
    left: -2%;
    top: -50px;
    display: block;
    width: 105%;
    margin-right: auto;
    margin-left: auto;
   -webkit-transform: rotate(-3deg);
   -ms-transform: rotate(-3deg);
   transform: rotate(-3deg);
}

HTML

<div class="w-slider slider" data-infinite="1" data-autoplay="1" data-delay="4000" data-duration="5000" data-animation="fade">
    <div class="w-slider-mask mask">
        <div class="w-slide">
            <div class="slide-zusatz1">
                <div class="w-container slidertext">
                    <p>Here is some text</p>
                </div>
            </div>
            <img src="myimg.png">
         </div>
    </div>
</div>

Thanks

Answer 1

You can turn on hardware-accelerated rendering. To trigger that in browser, you need to use any css property that uses it.

For example, i added transform: translateZ(0) to your rotated div element. Here are the results: