1

As simple as it is, I can't get this animation to work properly.

What I am animating on hovering a div is:

  • transform3d(0, Xem, 0)
  • border
  • height

so, nothing special. But when I open this in Chrome, I'm getting a really poorly performing hover animation.

And the worst thing is that the transform 3d makes my text blurry. WHY? There is no zoom or any 3D effect.

Have a look in your browser: Click

Am I missing something? This seems like a quite simple animation.

div before hover

div before hover

div hovered (blurry text)

enter image description here

The CSS Code (SASS) is basically:

.disciplines-wrapper > div {
color: white;
padding: 0;
width: 33%;
margin-right: .5%;
margin-top: 320px;
height: 12em;
height: 8.375em;
cursor: pointer;
position: relative;


.wrap {
    height: 8.375em;
    position: absolute;
    transition: transform 0.2s ease-out, height 0.2s ease-out, border 0.2s ease-out;
    border: 1px solid white;
    overflow: hidden;
    backface-visibility: hidden;


    &:hover {
        transform: translate3d(0, -3.475em, 0);
        height: 11.875em;
        border: 1px solid $lightblue;
        background: $lightblue;

    }
}
}

The HTML

<div class="disciplines-wrapper">

            <div class="col-1-3">

                    <div class="wrap">
                        <div class="disciplines-text-wrapper">
                            <h1>
                                Kreation
                            </h1>
                            <p>Effektive Werbung entsteht durch das optimale Zusammenspiel aller Kreativen. </p>
                        </div>
                        <a href="#"><i class="icon-right-circled"></i>Weitere Informationen</a>
                    </div>

            </div>
            <div class="col-1-3">
                    <div class="wrap">
                        <div class="disciplines-text-wrapper">
                            <h1>
                                Druck
                            </h1>
                            <p>Kernkompetenz von Prinovis ist der Druck. Schnell, hochwertig und flexibel.</p>

                        </div>
                        <a href="#"><i class="icon-right-circled"></i>Weitere Informationen</a>
                    </div>
            </div>
            <div class="col-1-3">
                <div class="wrap">
                    <div class="disciplines-text-wrapper">
                        <h1>
                            Weiterverarbeitung
                        </h1>
                        <p>Nach dem Druck ist vor der Verarbeitung: Sammelheftung oder Klebebindung</p>

                    </div>
                    <a href="#"><i class="icon-right-circled"></i>Weitere Informationen</a>
                </div>
            </div>

    </div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
user3561012
  • 273
  • 3
  • 8
  • 3
    See http://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d and http://stackoverflow.com/questions/26176557/text-blurry-after-3d-transform and http://stackoverflow.com/questions/20326220/blurry-text-on-transformrotate-in-chrome and http://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome – isherwood Jul 13 '15 at 14:02
  • You might have resolved it already but, to me, The text seems pretty neat. I'm using Chrome 43.0.2357.132 if this can help you. http://i.imgur.com/woCYhND.png – Bladepianist Jul 13 '15 at 14:12
  • @isherwood nothing of this seems to work, thats why i created a new post – user3561012 Jul 13 '15 at 14:21
  • @Bladepianist thank you! what operating system are you using? – user3561012 Jul 13 '15 at 14:21
  • Ah yes, I might have have said it earlier. I'm on a Win' XP computer. And no blurry text on my phone either, Note 3 with last version of Chrome too nor Android Lollipop integrated browser. Firefox 35.0.1 is all good too. – Bladepianist Jul 13 '15 at 14:29
  • @user3561012 Can you try add text-shadow on h1 element? text-shadow: 2px 2px 2px #101010; The text stay bluried, but much readable. – Joci93 Jul 16 '15 at 07:20
  • This worked for me. `zoom: 1.005;` Hope this helps you too. This will make your content a little bit big but the blur problem will be solved. Hope this was helpful for you. – Jithin Raj P R Dec 03 '18 at 10:43
  • None of the css hacks work, it requires a workaround: https://stackoverflow.com/revisions/59363865/1 – SJacks Dec 16 '19 at 21:02

0 Answers0