CSS transform (scale) makes text blurry

Question

I have a problem with css transform:scale(1.4) making the text blurry in Google Chrome, and some cases in firefox as well.

In Google Chrome, it's always blurry.

Normally, it works in firefox. However, in Firefox, backface-visibility is bugged (since 2015...) and needs a fix which can be done by applying transform: rotateX(0deg). However, after applying the fix, the text becomes blurry!

I have tried all the solutions from here and from a couple other stackoverflow threads.

Here's the codepen.

And my code:

 body {
      background: #eee;
      font-family: 'Lato', sans-serif;
    
    }
    p {
        color: #3b3b3a;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Poppins', sans-serif;
        color: #3b3b3a;
    }
    .blue {
        color: #0e4b69!important;
    }
    .faded {
      color:rgba(14,75,105,0.2)!important;
    }
    
    .card {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 300px;
      height: 300px;
      margin: -150px;
      perspective: 500px;
      transition: all 0.3s ease-in-out;
    }
    .card:hover {
      transform: scale(1.4);
      -webkit-font-smoothing: subpixel-antialiased;
    }
    
    .content {
      position: absolute;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
    
      transition: transform 1s ease;
      transform-style: preserve-3d;
    }
    
    .card:hover .content {
      transform: rotateY( 180deg ) ;
      transition: transform 0.5s;
    }
    
    .front,
    .back {
      position: absolute;
      height: 100%;
      width: 100%;
      background: white;
      color: #0e4b69;
      backface-visibility: hidden;
      border-radius : 12px;
      -moz-border-radius : 12px;
      -webkit-border-radius : 12px;
    }
    .front {
      font-size:1.8rem;
      text-align:left;
    }
    
    .back {
      background: rgba(255,255,255,0.95);
      color: #0e4b69;
      transform: rotateY( 180deg );
    }
    .front-container img.number, .back-container img.number {
      max-width:2.2rem;
    }
    .back-container img.number {
        margin-left: -0.5rem;
        margin-top: -0.5rem;
    }
    .front-container img.arrow {
      max-width:3.8rem;
      margin-right:-0.8rem;
      float:right;
    }
    .front-container h3 {
        margin-top: -2.1rem;
        margin-left: 1.1rem;
      margin-bottom:0px;
    }
    .back-container h5 {
        -webkit-font-smoothing: subpixel-antialiased;
        backface-visibility: hidden;
        text-align: center;
        margin-top: -2.9rem;
        margin-left: 0.4rem;
        margin-bottom: 0.4rem;
    }
    .back-container p {
      font-size:0.9rem;
          text-align: justify;
        margin-left: 0.6rem;
        margin-top: 0px;
    }
    
    .front-container, .back-container {
      padding:2rem;
    }

  <div class="card">
      <div class="content">
        <div class="front">
          <div class="front-container">
            <h3 class="blue">Having a vision and passion</h3>
          </div>
        </div>
        <div class="back">
          <div class="back-container">
            <h5 class="blue">Having a vision and passion</h5>
            <p>Being determined what I have to offer is my calling and purpose. Facing the nos, rejections, and failures. Overcoming limitations. Never settling or resting. Always finding another way. Constantly demanding more of myself. It takes everything and demands more.</p>
          </div>
        </div>
      </div>
    </div>

related if not duplicate: https://stackoverflow.com/q/50913783/8620333 — Temani Afif, Jun 30 '19 at 10:57
When a feature is buggy, you may look for an alternative to avoid it : https://codepen.io/gc-nomade/pen/LKQLxZ it spares time — G-Cyrillus, Jun 30 '19 at 11:08
Why should you scale it? Why not changing the `font-size`? Something like `font-size:1.4em` — enxaneta, Jun 30 '19 at 11:08
@G-Cyr I like this workaround, but then the height and width cannot be dynamic, which is not optimal. Will probably end up using something like this. Still, I think it is unexpected browser behaviour. — lastnoob, Jun 30 '19 at 12:12
okay, you do give a size to the card to start with 300x300 and a margin also in px. If you use em or rem to size also the card and margin, then only a font-size should be required. — G-Cyrillus, Jun 30 '19 at 12:25

score 1 · Answer 1 · answered Jun 30 '19 at 11:48

1

I've being experimenting with this, seems like the combination of:

perspective
transform: scale(...)
transform: rotateY(...)

results in this behavior. To me, that looks like a browser bug or unexpected browser behavior.

Solution:

Remove perspective, or use fixed font-size on hover rather than transform: scale(1.4).

answered Jun 30 '19 at 11:48

evilReiko

19,501
24
86
102

Thanks. The problem is that the look of the card flip changes if I remove perspective. Font-size doesn't increase the size of the card itself, unfortunately. Might end up making is a statically sized element, and increase the height and width of it, along with the font-size. – lastnoob Jun 30 '19 at 12:11

CSS transform (scale) makes text blurry

1 Answers1

Solution: