CODEWITHSUNDEEP
htmlcssinternet-explorermicrosoft-edge
Turnip
Turnip

Reputation: 21

Why is my site approximately 50% wider than viewport in IE and Edge?

A site I'm preparing is about 150% width of the viewport. I have checked the site and no element appears to be wider than the viewport. The problem occurs only in IE 10+ and Edge; earlier versions of IE or other browsers display everything fine.

I have found out that: 

.test {
   width: 100%;
   min-height: 400px;
   background-color: red;
   margin-top: calc(100vh);
}
.header {
   display: flex;
   justify-content: center;
}
.header-img {
   width: 2000px;
   position: fixed;
   top: 0;
   z-index: -2;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
  .header-img{
    transform: translateX(-50%);
  }

  .branding-wrapper {
    transform: translateX(-50%);
  }
}
.branding-wrapper {
   height: 350px;
   width: 100%;
   position: absolute;
   bottom: 0px;
   background: blue;
}
<body class="home blog">
<div class="header">
    <img src="image link" alt="test" class="header-img">
    <div class="branding-wrapper ">
  text
    </div>
</div>
<div class="test"></div>

The problem can be seen here: https://codepen.io/mateuszcora/pen/WdOQMr

Upvotes: 1

Views: 556

Answers (1)

Turnip
Turnip

Reputation: 21

Fixed the issue by centering the image another way in IE

.header {
    justify-content:center;
    display:flex;
}
   // margin-bottom:-52px;
}
.header-img {
    min-height: 100vh;
    position: fixed;
    top: 0;
    z-index: -2;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .header-img {
        transform:translateX(-50%);
        margin:0 auto;

    }
    .header{
        display:unset;
        justify-content:unset;
    }

Upvotes: 1

Related Questions