Browser Anti-Aliasing (smooth lines)

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

Hmm, that's odd. Changing the image on the slider results in the bottom becoming smooth and then after a short delay becoming "blocky" again. — James Paterson, Apr 21 '15 at 09:03
Whilst it's good to link to a page where we can see the problem, can you add in the relevant code here? From the [help page](http://stackoverflow.com/help/how-to-ask), _"If it is possible to create a live example of the problem that you can link to (for example, on http://sqlfiddle.com/ or http://jsbin.com/) then do so - but also include the code in your question itself. Not everyone can access external sites, and the links may break over time."_ — James Thorpe, Apr 21 '15 at 09:03
I get a lot of css errors in the webconsole of Firefox. Maybe you can take a look to these errors — Vinc199789, Apr 21 '15 at 09:04
@web-tiki i'll update the question real quick. Thank you for the advice — DasSaffe, Apr 21 '15 at 09:04
[same issue in FF](http://stackoverflow.com/questions/20406355/anti-aliasing-on-rotated-div-with-border-image-in-firefox) and here is an [interesting post about hardware acceleration](http://stackoverflow.com/questions/26356769/test-if-hardware-acceleration-has-been-enabled-for-a-css-animation) — web-tiki, Apr 21 '15 at 09:19
@web-tiki to solve it in FF, you have to add: outline: 1px solid transparent; — DasSaffe, Apr 21 '15 at 09:20
I tried all the tricks suggested in these answers with your page, but none of them worked with Chrome http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome — Rauli Rajande, Apr 21 '15 at 09:24
@RauliRajande adding `backface-visibility:hidden;` or `translateZ(0px)` to `.mask` solves the issue. — web-tiki, Apr 21 '15 at 09:28

score 4 · Accepted Answer · answered Apr 21 '15 at 09:07

4

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:

enter image description here

answered Apr 21 '15 at 09:07

Ivan Batić

476
2
8

RichieAHB · Answer 2 · 2015-04-21T09:13:59.440

If you add -webkit-backface-visibility: hidden; it will remove the antialiasing, a bit of a fix for many things to do with transforms in chrome and safari!

.slider {
    -webkit-backface-visibility: hidden;
}

My guess is that when trying to render the backface of a transformed element it causes z-fighting issues with the rendering in some way. Removing the backface seems to solve this.

Additionally, as other answers have mentioned you can also resolve this by explicitly setting the translate position for the z-axis with transform: translateZ(0); as well, which allows hardware acceleration to kick in and solve the problem via a different route.

SW4 · Answer 3 · 2015-04-21T09:12:44.100

0

Change the transform on w-slide to:

transform: translateZ(0px) translateX(-1300px);

Adding a z-perspective to 3d transforms fixes the issue.

Alternatively, you can use backface-visibility: hidden; as noted elsewhere. Depending on your required browser support you may need to use vendor specific prefixes

edited Apr 21 '15 at 09:12

answered Apr 21 '15 at 09:07

SW4

69,876
20
132
137

Browser Anti-Aliasing (smooth lines)

3 Answers3