-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Strange dissapearing elements in chromium browsers (not Firefox) #427
Comments
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. |
Hi @Robak08 I've got code like this:
And that's pretty much true - when i remove P.S. thanks for the design compliment - trying my best ;) |
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.
should fix the issue. I've added it in devtools on Your website - it seems to be working as expected. |
Awesome! works like a charm ;) I've found one issue though - when i set it to Even setting |
I've found a better solution in different topic: #361 just use |
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:
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). |
@Robak08 - thanks for info, but why do you think that |
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. |
Thanks for the explanation - i've made it working with |
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:
Expected behavior
Elements should be displayed whole time (not dissapearing and appearing back)
Desktop (please complete the following information):
Thank you 👊
The text was updated successfully, but these errors were encountered: