Strange dissapearing elements in chromium browsers (not Firefox)

[SoulDesignerTom]

Hello 👋

Describe the bug
The issue is showing when i'm scrolling website for more than one time. When i scroll down and then scrolling back up - so elements appears on screen with a little delay (it's empty space and then elements appear).

To Reproduce
Steps to reproduce the behavior:

1. Go to https://tomb.pl/projects/seed-cafe/
2. Scroll down to the bottom of the page
3. Scroll back up
4. See the elements appear from nowhere (some elements doesn't even display anymore).

Expected behavior
Elements should be displayed whole time (not dissapearing and appearing back)

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome
• Version 101.0.4951.54

Thank you 👊

[Robak08]

Hi,

I've checked website (great design btw), and it's possible that Your passing repeat: true to locomotive options object, which toggles inview class (data attribute in Your case), removing it or passing false (it's false by default) value should work for single in-transition.

Tho, I guess not gonna fix the entire issue. On firefox the viewport detection seems to have either smaller margin or section is considered bigger -> It triggers inview when on edge of screen -> hence no weird flicker effect (when on chromium it's delayed until certain (bigger than in firefox) height of target element is visible.

[SoulDesignerTom]

Hi @Robak08

I've got code like this:

const scroll = new LocomotiveScroll({
        el: document.querySelector('body'),
        smooth: true
    });
	
setTimeout(() => {
        scroll.update();
    }, 800);

And that's pretty much true - when i remove smooth: true - it all works fine but i don't have this smooth scrolling effect anymore and i would love to keep it.

P.S. thanks for the design compliment - trying my best ;)

[Robak08]

@SoulDesignerTom

There was similar issue in this repo, suggested solution is to add arbitrary value for persepective to container element (body in Your case).

So adding ex.

body {
   perspective: 1px; 
}

should fix the issue. I've added it in devtools on Your website - it seems to be working as expected.

[SoulDesignerTom]

@Robak08

Awesome! works like a charm ;)
Thanks

I've found one issue though - when i set it to perspective: 1px - expandable menu (burger menu) on lower resolutions doesn't work properly. I've checked it with other website i've done - also with burger menu and it's same.

Even setting perspective:none to the expandable menu elements doesn't help.
Do you think there is solution for this?

[SoulDesignerTom]

I've found a better solution in different topic: #361

just use position:fixed; on main element.

[Robak08]

@SoulDesignerTom

I'm not sure (probably I'm wrong) that setting position: fixed on whole container is a good idea (maybe with simple static sites), but to resolve Your issue just change height of menu list element from height: 100% to:

/edit my bad more like this:

nav.main-menu {
    height: 100vh;
    ul {
    height: inherit;
    }
}

and additionally You should move VISIT US button inside nav.main-menu - so it gets position properly to whole screen (header element doesnt have full height). So that's simplest way of doing it, or You can try to set header height to 100vh for mobile and position navigation elements a bit differently so they actually flow as they should (that probably will be more elegant way).

[SoulDesignerTom]

@Robak08 - thanks for info, but why do you think that position:fixed is not a good idea for more complex websites?
In my case it works with no issues. So just wonder...

[Robak08]

Anything beside static position is disrupting "natural" website flow. As I usually tend to lean on most simple structure. Fixed elements are positioned relative to viewport hence there might be some implications as to viewport calculations (maybe not but why overcomplicate things), as well as there might be issues with exterior elements positioning (like widgets or web components). As for statement that for more complex websites it might be not preferable - I just got feeling that it might affect negatively performance with a lot of elements transformations around viewport.

[SoulDesignerTom]

Thanks for the explanation - i've made it working with perspective:1px;