Jump at end of CSS transition

Question

When I hover over the div, the .note span fades in. After it fades in, the font-weight seems to suddenly increase (it becomes bolder). I realize that in the fiddle there is no image, but it is not required to see my issue.

Html:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
    <title>Cool Effect</title>
</head>
<body>

    <div class="imageHolder">
        <img src="picture1.jpeg">
        <span class="note">Hello!</span>
    </div>

</body>
</html>

CSS:

.imageHolder {
    position: relative;
    top:300px;
    left: 300px;
    width: 300px;
    height: 250px;
    text-align: center;
    overflow: hidden;
    background-color: black;
}

.note {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 2px solid white;
    padding: 8px;
    color: white;
    font-size: 24px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

img {
    width: 300;
    opacity: 1;
    height: 250px;
}

.imageHolder:hover .note {
    opacity: 1;
}

Thanks.

You could start by closing your img tag (either or should work....and I'm checking the other stuff — ydobonebi, Jul 22 '15 at 20:22
You could use `translate3d` to use hardware acceleration in Webkit-based browsers. See: http://www.smashingmagazine.com/2012/06/play-with-hardware-accelerated-css/ — Hashem Qolami, Jul 22 '15 at 20:24
@QuinnRoundy http://www.w3schools.com/tags/tag_img.asp - Img tags do not require closing. — George, Jul 22 '15 at 20:30
the validator failed on that....I guess they need to update the validator :) — ydobonebi, Jul 22 '15 at 20:33

Turnip · Answer 1 · 2015-07-22T20:31:05.043

4

Using a 3d transform (ie. using hardware acceleration) fixes lots of these rendering issues.

.note {
    ...
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    ...
}

This is well documented

DEMO

Alternatively, this also seems to work for your example and may have better browser support...

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

DEMO

edited Jul 22 '15 at 20:31

answered Jul 22 '15 at 20:25

Turnip

35,836
15
89
111

This works very well. Thanks. Only issue is that the text appears bad quality and a bit grainy? https://jsfiddle.net/vuz0u2d8/17/ – George Jul 22 '15 at 20:43
1

Unfortunately that side-effect is also [well documented](http://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d) – Turnip Jul 22 '15 at 20:52

nextstep · Answer 2 · 2015-08-04T13:31:35.587

Note these changes:

.note {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 2px solid white;
    padding: 8px;
    color: white;
    font-size: 24px;
    opacity: 0;
    -webkit-transition: opacity 0.1s;             <--
    transition: opacity 0.1s;                     <--
}

Although the transition speed is slightly quicker this fixes the problem in the fiddle.

Jump at end of CSS transition

2 Answers2