CODEWITHSUNDEEP
htmlcssmicrosoft-edgeline-height
zweistein
zweistein

Reputation: 108

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.

Upvotes: 0

Views: 861

Answers (2)

Rasso
Rasso

Reputation: 418

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;
    }

Upvotes: 1

Chris
Chris

Reputation: 1321

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

window.onload = function();

Upvotes: 0

Related Questions