Blurry text in Chrome and Opera with CSS transform

[chantalcurtis]

Hi – been trying all kinds of solutions on the forum to look for a solution…

I’m having horrible blurry text issues in Chrome and Opera, but FF, IE and Safari are fine.

http://codepen.io/TinkerGirl/pen/beBoQL

Any help would be greatly appreciated :)

The css is below:

.hex {
  position: relative;
  list-style-type: none;
  float: left;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;  /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate(-60deg) skewY(30deg) translatez(0px);
        -ms-transform: rotate(-60deg) skewY(30deg) translatez(0px);
transform: rotate(-60deg) skewY(30deg) translatez(0px);
}

.hex * {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;  /* fix for jagged edges in FF on hover transition */

}

.hexIn {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate(60deg);
        -ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
    background-image: url("img/hexagon_background.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');
}

.hexLogo {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  overflow: hidden;
 -webkit-transform: skewY(-30deg) rotate(60deg);
        -ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);

}



/*** HEX CONTENT **********************************************************************/

.hex img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;  
-webkit-transform: perspective(1px) translate3d(0,0,0) !important;
transform: perspective(1px) translate3d(0,0,0) !important;
}

.hex h1 {
  margin: 0;
  width: 102%;
  left: -1%;  /* prevent line on the right where background doesn't cover image */
  padding: 25% 20%;
  box-sizing: border-box;
  font-weight: 300;
  transition: transform .2s ease-out, opacity .3s ease-out;
color: #040828;
letter-spacing: 1px;
-webkit-transform: perspective(1px) translate3d(0,0,0) !important;
transform: perspective(1px) translate3d(0,0,0) !important;

}
.hex p {
  margin: 0;
  width: 102%;
  left: -1%;  /* prevent line on the right where background doesn't cover image */
  padding: 15% 10%;
  box-sizing: border-box;
  transition: transform .2s ease-out, opacity .3s ease-out;
-webkit-transform: perspective(1px) translate3d(0,0,0) !important;
transform: perspective(1px) translate3d(0,0,0) !important;
}

.hex h1 {
  bottom: 15%;
  padding-top: 100%;
  font-size: 1.35em;
  z-index: 1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
-webkit-transform: perspective(1px) translate3d(0,0,0) !important;
transform: perspective(1px) translate3d(0,0,0) !important;
}


.hex p {
  top: -5%;
  padding-bottom: 80%;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
-webkit-transform: perspective(1px) translate3d(0,0,0) !important;
transform: perspective(1px) translate3d(0,0,0) !important;
}

[amanda_]

Hi,

I don’t see the text in your pen. But I also don’t see any font-smoothing in your css code.

[bearhead]

The text blur seems to go away if you remove all instances of these rules:

-webkit-transform: perspective(1px) translate3d(0,0,0) !important;
transform: perspective(1px) translate3d(0,0,0) !important;

http://codepen.io/kvana/pen/pbNpdR

The text will still be a little blurry during the hover transitions, but I don’t think there is anything that can be done about that… I’m pretty sure its just how some browsers render during transitions.

[chantalcurtis]

Thank you :)

[Author]

Posts