Hovering Over CSS Transition in Safari Lightens Certain Font Color

Hovering over CSS transition in Safari lightens certain font color

I was struggling with a similar issue.
For me, random links throughout the page became apparently bold (clearly something to do with OSX and anti-aliasing in Safari, as Chrome (in windows 7 and OSX) as well as the same version of Safari in Windows worked fine.

The solution is not obvious, and depending on what you are doing might not be optimal, but adding this line of code fixed the issue:

-webkit-transform: translateZ(0);

This basically triggers the GPU to do animation, and the text no longer had artifacts in my site. Do note that it's not always appropriate to use it, as it may use more battery life and use more resources. Sometimes however, it uses less, so basically check the performance when you add it.

You add this to the normal state not the :hover animated state.

img { -webkit-transform: translateZ(0); }

As opposed to on the:

img:hover { /* not here */ }

The other very positive side effect is that depending on the animation you are doing, it might be smoother through the GPU. So you won't get the choppy animation you mention in your follow up post. In my case, the animation was more seamless in safari. I was doing a 120% scale and 5 degree rotation of an image with some box-shadow appearing at the same time. In my situation, it did not reduce CPU usage unfortunately.

CSS3 transition messing up fonts in webkit?

What you're seeing is webkit anti-alias your text because it's treating it as a texture as opposed to a vector. There's not much you can do, other than not using transformations, or using an text replacement to provide an image instead of your type.

There's a few related threads regarding webkit aliasing, but I haven't personally had much luck keeping the type as type, and still using transformations.

Webkit Opacity Transition Issues with Text

It's not an issue with the opacity itself (in fact, turning it back to 1 in @Zoltan's example doesn't change anything for me).

The issue is with the transitions, there are two anti-aliasing modes that webkit can use:

1. Subpixel (the default, but not supported during animations, transitions or transforms) or
2. Grayscale

This means that when an element is rendered using subpixel antialiasing and an animation is applied to it, webkit temporarily switches to grayscale for the duration of the animation and then back to subpixel once finished.

Given that subixel antialiasing results in a slightly heavier font face you get the unwanted artifact.

To solve the issue, add this to your css:

html {
    -webkit-font-smoothing: antialiased;
}

This forces grayscale antialiasing and all the text and you won't see the switching.

(end result: http://jsfiddle.net/ErVYs/9/)

Dynamically change color to lighter or darker by percentage CSS

All modern browsers have had 100% filter support since January 2020. Even UC Browser for Android (instead of Chrome, on the $80 phones) supports it.

a {
    /* a nice, modern blue for links */
    color: #118bee;
}
a:active {
    /* Darken on click by 15% (down to 85%) */
    filter: brightness(0.85);
}

Additionally, you can control this dynamically with CSS variables, which have been supported by most browsers since October 2017 (excluding QQ):

:root {
    --color: #118bee;
    --hover-brightness: 1.2;
}
a {
    color: var(--color);
}
a:active {
    /* Darken on click */
    filter: brightness(var(--hover-brightness));
}

Not my project, but one that's great to look at for a real-world example of how great modern CSS can be, check out: MVP.css

---

Original Answer

If you're using a stack which lets you use Sass or Less, you can use the lighten function:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}

There's also darken which does the same, but in the opposite direction.

CSS Hover Opacity Transition flicker when hovering over element that is on top of another element

When you hover over the play button, you change the opacity of the div with the class image. That is what causes the flicker.

What you should do is change the opacity of the img

.play-button-container img:hover,

.play-button:hover + .image > img {

   opacity: .6;

}

.play-button-container img {

  transition: opacity .5s ease-out;

  -moz-transition: opacity .5s ease-out;

  -webkit-transition: opacity .5s ease-out;

  -o-transition: opacity .5s ease-out;

}

.play-button {

    position: absolute;

    top: 10%;

    left: 10%;

    font-size: 30px;

    color: #fff;

    z-index: 1000;

    background-color: red;

}

<div class="image-container">

  <div class="play-button-container">

  

    <div class="play-button">

      PLAY

    </div>

    

    <div class="image">

      <img src="http://papers.co/wallpaper/papers.co-am19-tycho-art-music-album-cover-illust-simple-white-40-wallpaper.jpg" width="350">

    </div>

    

  </div>

</div>

Brighten images from dark to light on hover

Typically you would do this by putting a black background behind your images and the set the opacity of the images to some value < 1.

On your site, you would add the following CSS:

.cardimgcrop {
    background-color: black;
    border-color: white;
}

.cardimgcrop img {
    opacity: 0.7;
}

.cardimgcrop img:hover {
    opacity: 1;
}

UPDATE:

If you want an animated fading, you would leave out the :hover CSS definition and add the following Javascript lines (using jQuery 1.4.2 as already used on your site):

$(document).delegate('.cardimgcrop img', 'mouseover', function() {
   $(this).fadeTo(500, 1);
});
$(document).delegate('.cardimgcrop img', 'mouseout', function() {
   $(this).fadeTo(500, 0.7);
});

Of course you could also native CSS transitions instead for this effect (as suggested in Howard's answer), but you would need to take care of browser capabilities.

Wonky text anti-aliasing when rotating with webkit-transform in Chrome

Try triggering the CSS 3d Transform mode with webkit. this changes the way chrome renders

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);

---

edit

There also a Webkit only style declaration -webkit-font-smoothing which takes the values

• none
• subpixel-antialiased
• antialiased

where subpixel-antialiased is the default value.

Alas, the subpixel antialias is no good solution for rotated text. The rendering machine cant handle that. The 3d transform switches to just antialiased. But we can try to set it directly.

See here http://maxvoltar.com/archive/-webkit-font-smoothing

---

Related Topics