Why is the same line-height rendered differently in two different Chrome versions?

Question

I am showing a button like:

.button {
  height: 44px;
  background-color: #FF0000;
  display: block;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 5px;
  border-top: none !important;
  line-height: 42px !important;
}

<div class="button">Text</div>

Everything works perfectly, except when viewing it in mobile on:

Android 8.1.0 AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/76.0.3809.132 Mobile Safari/537.36

the text shows approximately 2 pixels higher up inside the div than with:

Android 9 AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/77.0.3865.73 Mobile Safari/537.36

Why would that be? And how is it fixable?

Including 1) a runable snippet and 2) screenshots would be useful. — user2864740, Sep 19 '19 at 18:09
Possible duplicate of [Is it possible to achieve line-height consistency in all browsers?](https://stackoverflow.com/questions/4474636/is-it-possible-to-achieve-line-height-consistency-in-all-browsers) - 9 years and it's still the same battle. — disinfor, Sep 19 '19 at 18:15
you are not specifing any font-familly, so they will never be the same because you will not have the default same font everywhere — Temani Afif, Sep 19 '19 at 19:20

score 2 · Accepted Answer · answered Sep 19 '19 at 18:22

You may try to rely on the flex model here :

a few examples that you might test on your mobiles:

.button {
  height: 44px;
  background-color: #FF0000;
 /* display: block; */
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 5px;
  border-top: none !important;
  /*line-height: 42px !important;*/
}

/* TEST  UPDATE */
.button {
  display: flex;
  align-items:center;
  
  
/* demo purpose */  
  /* to show middle */
    background-image:linear-gradient(to top, transparent 50%, rgba(0,0,0,0.2) 50%);
}
.fz2 {font-size:2em;}
.fmthm {font-family:verdana;}

<div class="button">Text</div>

<div class="button fz2">Text</div>

<div class="button fmthm fz2">TEXT</div>

Thank you. Will give that a try and report back :) – moo moo Sep 19 '19 at 18:31 — moo moo, Sep 19 '19 at 18:31
It's a miracle! Flex saved the night. Thank you so much! :) – moo moo Sep 19 '19 at 18:36 — moo moo, Sep 19 '19 at 18:36

Why is the same line-height rendered differently in two different Chrome versions?

1 Answers1