IE (!) Fixed element scrolls on scroll (scroll-wheel and keyboard)

user_476951 0
Viewed 174

Test this code in IE11! It is a stripped down version of a complex page, which works well in all browsers except IE11. I need to support this browser.

.theme-layout {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  height: 100vh;
  max-height: 100vh;
}

.theme-content {
  -webkit-box-ordinal-group: 2;
          order: 1;
  width: 100%;
  -webkit-box-flex: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  flex-wrap: nowrap;
  -webkit-box-align: stretch;
          align-items: stretch;
  position: relative;
}

.theme-main {
  flex-basis: 100%;
  -webkit-box-ordinal-group: 3;
          order: 2;
}

.composite-page {
  padding-bottom: 7.5rem;
}

.composite-page-background {
  margin: 0;
}
.composite-page-background picture {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  flex-wrap: nowrap;
  -webkit-box-align: stretch;
          align-items: stretch;
}
.composite-page-background picture img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  width: 100%;
}
.composite-page-background picture:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(-10%, #0c6158), color-stop(60%, transparent));
  background-image: linear-gradient(to bottom, #0c6158 -10%, transparent 60%);
}

.theme-paragraph-section {
  height: calc(100vh - 7.5rem);
  display: -webkit-box;
  display: flex;
  scroll-snap-align: start;
}
@media screen and (max-width: 768px) {
  .theme-paragraph-section {
    height: auto;
  }
}
.theme-paragraph-section:target {
  -webkit-animation: theme-paragraph-section-blink 1.3s;
          animation: theme-paragraph-section-blink 1.3s;
}
@media (prefers-reduced-motion: reduce) {
  .theme-paragraph-section:target {
    -webkit-animation: none;
            animation: none;
  }
}
.theme-paragraph-section:before, .theme-paragraph-section:after {
  content: "";
  -webkit-box-flex: 1;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(45rem / 2);
  pointer-events: none;
}
<div class="theme-layout">
  <div class="theme-content">
    <main class="theme-main" id="main-content" role="main">
      <div>
        <div id="block-mainpagecontent">
          <article class="composite-page">
            <figure class="composite-page-background">
              <picture>
                <source media="(min-width: 1601px)" srcset="https://picsum.photos/id/1/1920/1080">
                <source media="(min-width: 1381px)" srcset="https://picsum.photos/id/1/1600/900">
                <source media="(min-width: 1181px)" srcset="https://picsum.photos/id/1/1380/777">
                <source media="(min-width: 901px)" srcset="https://picsum.photos/id/1/1180/664">
                <source media="(min-width: 611px)" srcset="https://picsum.photos/id/1/900/507">
                <source media="(max-width: 610px)" srcset="https://picsum.photos/id/1/610/1084">
                <img src="https://picsum.photos/id/1/900/507">

              </picture>
            </figure>
            <div class="theme-paragraph-section" id="paragraph-45">
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
              Dummy Content<br><br><br>
            </div>
          </article>
        </div>
      </div>
    </main>
  </div>
</div>

Since stackoverflow does not support IE11 anymore, I link to a codepen debug view, which you can open in IE11: https://cdpn.io/HerrSerker/debug/748ff2e947bdc668a7af47e6eeb0872a

This code contains a responsive image, which should cover the whole window and stay fixed when scrolling. Layered before this image is some dummy content that forces the page to be scrollable.

Now the problem: When I scroll in Internet Explorer 11, the fixed image in the background isn't fixed, but jumps up and down, but only, if I scroll using the mouse scroll wheel or the keyboard (SPACE, UP, DN, PGUP, or PGDN). If I drag the scroll bar, the fixed element stays fixed as it should be.

I made a GIF out of a screencast to demonstrate the problem enter image description here

fixed css-position scroll internet-explorer css
1 Answers

I try to test your sample code in the IE 11 browser and I can see the issue there.

I try to check the CSS code and found that position: relative; in .theme-content CSS class causing this issue.

If you remove or comment the position: relative; then issue can be solved.

Output in IE 11 browser:

enter image description here

user_103093810
Related