0

I've searched for quite some time now and sadly haven't been able to find an answer to my exact question.

There are quite a few topics on various sites such as stackoverflow (e.g. this question) and a lot of blogs trying to "fix" slow scrolling performance of position:fixed elements (e.g. benfrain.com). However I'm yet to come across someone discussing the impact of elements positioned off-screen, that are most likely also position:fixed.

Let's take the example below.

I've recently developed a website using similar layout in which I've placed the elements off-screen to make sure that the links are also available for screen readers etc (navigation elements for mobile to be specfic). However, given the numerous sites describing reduced scroll performance in various browsers due to position:fixed elements I'm curious:

Question: Are fixed elements positioned off-screen also rendered in the same way as ones position on-screen - and hence, are they subjects to causing reduced scrolling performance?

EDIT: As labelled as possible duplicate allow me to elaborate: my question is only considering the case where the element is still positioned off-screen while scrolling. It's not with regards to the actual action/movement/animation of the off-screen element to bring into view nor with regards to other repaints of the viewport. 

for (i = 0; i < 50; i++) {
  $("body").append("<p>Pardon me being lazy, inserting 'content' jQuery-way.</p>");
};
$(".show-one").on("click", function() {
  $(".one").toggleClass("show");
});
$(".show-two").on("click", function() {
  $(".two").toggleClass("show");
});
.nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background: lightblue;
}

button {
  width: 50%;
  float: left;
  height: 100%;
}

.off-screen {
  position: fixed;
  width: 100%;
  height: 30%;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
  transition: transform .77s ease;
}

.one {
  top: 50px;
  background: lightgreen;
  transform: translate3d(100vw, 0, 0);
}

.two {
  top: 50%;
  background: pink;
  transform: translate3d(0, 100vh, 0);
}

.show {
  transform: translate3d(0, 0, 0);
}

body {
  overflow-x: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <button class="show-one">Toggle off-screen one</button>
  <button class="show-two">Toggle off-screen two</button>
</div>
<div class="off-screen one"></div>
<div class="off-screen two"></div>
Chri.s
  • 1,386
  • 1
  • 12
  • 23
  • Possible duplicate of [Does an HTML element absolutely positioned outside of the viewport area affect the performance of repaint?](https://stackoverflow.com/questions/27109174/does-an-html-element-absolutely-positioned-outside-of-the-viewport-area-affect-t) – Seblor Jul 18 '18 at 08:52
  • @seblor wouldn't exactly say that's a duplicate as that question is only considering repaints of the viewport and not scrolling per se. My question isn't considering the actual repaint/action/movement of the off-screen element but solely the scrolling performance **while** the element is still off-screen. I will elaborate in question. – Chri.s Jul 18 '18 at 08:56
  • The answer is still the same. Any element in the DOM, in the viewscreen or not, is rendered. – Seblor Jul 18 '18 at 08:59
  • @seblor but why should/would an element which isn't overlapping or interfering with any other elements during scroll cause either repaint or re-render? I'm hoping and looking for some further explanation besides that it's rendered because it's part of the DOM. – Chri.s Jul 18 '18 at 09:03

0 Answers0