H1 CSS hover optimize legibility issue in Chrome

I did some research and was having an issue with my H1 tags having a bit of space at the top of them on hover. Found this answer and implemented the code, looks like it was an issue with adding optimizeLegibility: CSS: Text color slightly offset in Safari/Firefox

However, I am still seeing the issue persist. As you can see in my example, the hover color is grey but a little slice of the original color (red) still exists.

Read More

Does anyone know what else I can do to fix this? The issue only appears in Chrome for OSX/Win7.

Here’s the markup:

    <h1 class="entry-title">
    <a rel="bookmark" href="http://www.linklinklink.com">Blazers look to stop Jeff Green on fastbreak in matchup with Celtics</a>
    </h1>

And the CSS

    .entry-header .entry-title {
color: #EE3A44;
float: left;
font-family: 'OswaldBold',sans-serif;
font-size: 38px;
font-weight: 100;
margin: 5px 0 0;
text-decoration: none;
text-rendering: optimizelegibility;
text-shadow: 1px 1px 0 #000000;
text-transform: uppercase;
width: 100%;
word-wrap: break-word;


    .entry-title a {
text-decoration: none;
text-rendering: optimizelegibility;

Thanks

Related posts

Leave a Reply