Site automatically clicks on load

(i deleted the issue because i figured out the bug wasn’t because netlify was saving site data, but becuase of the following reason)

i recently made my first nelify site, and that site had an animation when moving to a diffrent page, however, unlike in the live website (i used both 11ty and live server), the opacity seemed to stay the same, i tested a couple times and figured out that the button was automatically clicked when i load back in, yet the animation never finishes, so the screen just turns into the color of the animation.

here’s the code:

(html)

type or paste code here<body class="css-selector" onload="fix()">
    <!-- css-->
    <link rel="stylesheet" href="mainStyle.css"/>

    <!-- the main, important things-->
    <h1 class="main" style="font-size: 10vw;">welcome!</h1>

    <!--script and things for te transition-->
    <script src="transition.js"></script>

    <div class="transition" id="about">aaa</div>
    <div class="transition" id="projects">aaa</div>
    <div class="transition" style="color: transparent;" id="socials">aaa</div>
    <!-- links to the other things-->
    <div class="content">
        <a class="link" onclick="pressed('projects', 'data/media/index.html')">my projects</a>
        <a class="link" onclick="pressed('about', 'data/about/index.html')">about me</a>
        <a class="link" onclick="pressed('socials', 'data/socials/index.html')">my socials</a>
        </div>
</body>

(css)

.transition{
    position: absolute;
    width: 100%;
    height: 100%;
    right:0%;
    bottom: 0%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease-in-out;
}

(javascript)

var object;
const names = ["about", "projects", "socials"];

function pressed(id, location){
    console.log("button pressed")
    object = document.getElementById(id)
    object.style.opacity = 1;
    object.addEventListener("transitionend", () => {
        window.location.href = location;
    },);
}

function fix(){
    names.forEach(name => {
        object = document.getElementById(name)
        console.log(object)
        object.style.opacity = 0;
        console.log(object.style.opacity)
    });
}

and here’s the full website

in the console it showed that the opacity was 0 and the button was pressed (only in netlify, worked well in other servers), so i think that this is related to netlify in some way. i have no idea why or what could cause this and was hoping someone could explain it.

So it sounds like you know the issue? I’d be surprised if it works differently elsewhere as Netlify does not manipulate your files by default.

that’s what i thought too, but i debuged a couple time on multiple diffrent live servers, and all of them worked exept netlify, and after debugging, i found out that not only is the opacity at 1 for the transition of the site i just went to, the even listner is still working (untill i refresh), so i wanted to find a way to do it through site settings instead of changing my own code for this

Could you share the site name?

here’s the current link, i’l probably delete it soon cause i decided to fix it using javascript instead

I FOUND THE REASON

the reason was the history.back() thing. it seems that going back sent you to the last point before getting sent to the new area.

in order to fix it, i changed it from back to href, and just made it go to the main page.

Hi @ori.ri :wave:t6: thanks so much for coming back and sharing your solution!