0

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.

disinfor
  • 10,865
  • 2
  • 33
  • 44
zweistein
  • 98
  • 7

2 Answers2

1

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;
    }
Rasso
  • 410
  • 3
  • 11
0

You can manually wait until the page fully loads, and then display, reducing the chance of it rendering wrong.

window.onload = function();

Chris
  • 1,206
  • 2
  • 15
  • 35