[SOLVED] Edge browser renders page wrong, but correct after clicking refresh

Edge browser renders page wrong, but correct after clicking refresh

Edge renders page wrong afer loading it, but after clicking refresh it renders it correctly.

Works as expected on Chrome and Firefox

<html>

<head>
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      overflow: hidden;
    }
    
    .day {
      position: relative;
      float: left;
      width: 12%;
      background-color: white;
    }
    
    .header_class {
      position: relative;
      height: 5%;
      background-color: blue;
      color: white;
      font-size: 12px;
      text-transform: uppercase;
      text-align: center;
      line-height: 5vh;
    }
    
    .row_class {
      position: relative;
      height: 5%;
      color: black;
      font-size: 12px;
      text-align: center;
      line-height: 5vh;
    }
  </style>
</head>

<body>

  <div class="day">
    <div class="header_class">header</div>
    <div class="row_class">row1</div>
    <div class="row_class">row2</div>
    <div class="row_class">row3</div>
    <div class="row_class">row4</div>
  </div>

</body>

</html>

The text should be centered in the header box and below, but it is above the box when the page loads. If i click F5 or refresh it renders as expected.

Solution

There seems to be a bug in Microsoft Edge when using viewport height vh. Try setting a line-height in pixels and it should work. If you want to center the items then I suggest using flexbox, its widely supported in most browsers these days:

body {
      font-family: 'Open Sans', sans-serif;
      overflow: hidden;
    }

    .day {
      position: relative;
      width: 12%;
      background-color: white;
      display: flex;
      justify-content: center;
      align-content: center;
      min-height:0;
      flex-direction: column;
    }

    .header_class {
      position: relative;
      height: 5%;
      background-color: blue;
      color: white;
      font-size: 12px;
      text-transform: uppercase;
      text-align: center;
      line-height: 25px;

    }

    .row_class {
      position: relative;
      height: 5%;
      color: black;
      font-size: 12px;
      text-align: center;

      line-height: 25px;
    }