Chrome doesn't scale down em value when lowering the font-size of the parent

Issue

Problem

This is the original DOM element. It appears the same on Firefox and Chrome.

This is how the element appears on Firefox 36.0.1 when its parent's font-size is set to 0.6em. This is correctly scaled down to 60%.

This is how the element appears on Chrome 41.0.2272.104 when its parent's font-size is set to 0.6em. Some things appear to be scaled down to 60% while other things remained the same. This is incorrect. How do I make Chrome behave the same as Firefox?

Background

My website is set up to make 1em equal 10px.

body {
 font-size: 62.5%;
}

I use em units to size anything that I want to easily scale. I know using em is a dieing art, but I still think it is the easiest way to scale complex DOM objects - all you need to do is change the font-size of its parent and all the descendants get scaled.

In my particular situation, I needed the element to look 60% of its original size when the screen gets smaller. So I changed the font-size of its parent:

@media (max-width:960px) {
    #pageLanding {
        font-size: 0.6em;
    }
}

This is the CSS of the element:

.downloadApp {
    display: block;
    border: 2px solid #000;
    border-radius: 0.8em;
    background: #fff;
    color: #000;
    width: 36em;
    height: 10.8em;
    text-align: left;
}   
    
.downloadApp:hover {
    color: #fff;
    background: #000;
}   
     
    .downloadApp i {
        float: left;
        font-size: 8em; 
        margin: 0.1em 0 0 0.4em;
    }
    
    .downloadApp div {
        margin: 1.6em 0 0 12em;
    }   
        
        .downloadApp div p {
            font-size: 2em;
        }
        
        .downloadApp div strong {
            font-size: 4em;
        }

And this is the HTML. I use Font Awesome to display a vector version of the Android robot.

<div id="pageLanding">
    <p>Other stuff that needs to be scaled too</p>
    <p>More stuff</p>
    <a href="example.org" class="downloadApp">
        <i class="fa fa-android"></i>
        <div>
            <p>Get it on</p>
            <strong>Google Play</strong>
        </div>
    </a>
</div>

Solution

Chrome has a minimum font size of 6px. This would be the equivalent of 0.6em in my setup, which is exactly what tried to use. In the past, people have suggested to remove this constraint with:

* {
    -webkit-text-size-adjust: none;
}

But Chrome stopped supporting that in some recent version. Only iOS Safari still supports that.

The solution is to make the default size of the element small. Then you'd increase its font-size to make it larger. This is the opposite of what I was doing. In my case, my default size was big and I needed to scale down.

   .downloadApp {
       display: block;
       border: 2px solid #000;
       border-radius: 0.4em;
       background: #fff;
       color: #000;
       width: 9em;
       height: 2.7em;
       text-align: left;
  }
  
  .downloadApp:hover {
      color: #fff;
      background: #000;
  }
  
      .downloadApp i {
          float: left;
          font-size: 2em;
          margin: 0.15em 0 0 0.4em;
      }
  
      .downloadApp div {
          margin: 0.4em 0 0 3em;
      }
  
          .downloadApp div p {
              font-size: 0.5em;
          }
  
          .downloadApp div strong {
              font-size: 1em;
          }

Make it bigger by giving it a font-size greater than 1.0em:

  .downloadApp {
      font-size: 4.0em;
  }

Answered By - JoJo