Chrome does not translate an element on reload

Question

Okay i have a full page scroll project , everything works fine and beautiful on firefox except this Chrome..I have an element which translate on wheel event, so there is no actual scrolling.The element's CSS is

#trasnlateMe {
    height: calc(var(--vh) * 400);
    width: 100%;
    overflow: hidden;
    position: relative;
    transition: transform 1s cubic-bezier(0.5, 0, 0.5, 1);
}

and it has inline styling of

style="transform:translateY(0);"

on my js at beginning of code I have this code also.

let container = document.querySelector("#trasnlateMe");
container.style.transform = "translateY(0)";

basically when you scroll i get the direction through a flag and translate the page by this function.

const fullPageScroll = () => {
  containerHight = window.innerHeight * foldQuantity;
  yTrasnlationOfContainer = parseInt(
    container.style.transform.replace("translateY(", "")
  );
  if (
    (scrollDirection === "down" &&
      Math.abs(yTrasnlationOfContainer) <
        containerHight - containerHight / foldQuantity) ||
    (swipeDirection === "up" &&
      Math.abs(yTrasnlationOfContainer) <
        containerHight - containerHight / foldQuantity)
  ) {
    yTrasnlationOfContainer = yTrasnlationOfContainer - window.innerHeight;
  }
  if (
    (scrollDirection === "up" && yTrasnlationOfContainer < 0) ||
    (swipeDirection === "down" && yTrasnlationOfContainer < 0)
  ) {
    yTrasnlationOfContainer = yTrasnlationOfContainer + window.innerHeight;
  }

  if (holder === false && hambergurMenu.style.display !== "none") {
    holder = true;
    swipeDirection = null;
    container.style.transform = `translateY(${yTrasnlationOfContainer}px)`;
    for (let i = 1; i <= foldQuantity; i++) {
      if (yTrasnlationOfContainer === -(window.innerHeight * (i - 1))) {
        currentSection = i - 1;
      }
      fillRelatedCircle();
      setTimeout(() => {
        holder = false;
      }, 1000);
    }
  }
};
    //Handling wheel event of the whole page
    container.addEventListener("wheel", event => {
      if (event.deltaY > 0) {
        scrollDirection = "down";
      }
      if (event.deltaY < 0) {
        scrollDirection = "up";
      }
      event.stopPropagation();
      fullPageScroll();
    });

so everything works lovingly on firefox but chrome decided not to set the ytrasnlation of #trasnlateMe to 0, the abnormal thing is that it does on paper, when you look at the code after refresh it looks like this >> style="transform:translateY(0); but it stays at the same section which was before the refreshing on the viewport and the whole scrolling GETS BROKEN, IT COUNTS THE SECTION WHICH WAS BEFORE REFRESHING ON the VIEWPORT AS THE FIRST SECTION.

Please help this is so annoying.

Just NOTE: when I close the tab and open the html file again everything works beautifully on Chrome, even if you don't have an answer for this bug would you tell me what can I do to mimic that same behavior on reloading? That everything be like the page is opened right now.That would fix it too.

score 4 · Answer 1 · edited May 06 '20 at 14:39

4

I had similar problem, when replaceing srolling with translate on wheel event.

What helped me, was giving html and body:

overflow: hidden;
height: 100%;

edited May 06 '20 at 14:39

Peyman Mohamadpour

17,954
24
89
100

answered May 06 '20 at 12:17

agata604

51
1
3

score -1 · Answer 2 · answered Mar 02 '20 at 21:47

-1

Okay I just gave body

position: fixed;
top: 0;
left: 0;
right: 0;

and everything got fixed on Chrome, after coding for some time now I can really say Firefox is the best browser and chrome is the worst!

answered Mar 02 '20 at 21:47

AbeIsWatching

159
1
11

I think there may be some confirmation bias at play with your conclusion. There was a time when it was really difficult to make things even look roughly the same across browsers. At that point in time if you coded your site using Internet Explorer you might realise that every other browser failed to render your site properly. That certainly didn't mean that Internet Explorer was the best browser. – Jonathan Gray Mar 02 '20 at 22:06
My point still stands. If I were to rate Internet Explorer back in the day the same way you're rating Firefox and Chrome now I would have said that Internet Explorer was by far the best browser (which is obviously far from true). I guess what i'm saying is, refrain from phrasing subjective opinions in an objective manner. The only evidence you have is anecdotal after all (and again that is subject to confirmation bias). – Jonathan Gray Mar 02 '20 at 22:19
I have had a very similar problem , that the translated element wasn't restored to default after reloading the page , and adding the code from this answer solved my problem , and the page started reloading as in a dream :) Many thanks to @AbelsWatching for sharing the solution, this solution is my rescue! – Florin Filip Jul 20 '21 at 16:56

Chrome does not translate an element on reload

2 Answers2

Linked