Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Shaking navbar and laggy drop shadows when using smooth scroll with js #169

Open
JordanFist opened this issue Apr 30, 2020 · 1 comment
Open

Shaking navbar and laggy drop shadows when using smooth scroll with js #169

JordanFist opened this issue Apr 30, 2020 · 1 comment
Labels
bug help wanted

Comments

@JordanFist
Copy link

Hi!
First off, I would like to thank you for your awesome library!

Issue description:

I tried to condense my issues in the code below. I am really sorry, I think we can condense it more but I didn't manage because I don't really get it.

The first issue is when you use the navbar links to scroll down and up. You can observe that the navbar shakes, shifts up and down, and even blinks.

The second issue is when you are in the section4 and then click to section1, you can observe a lag when we reach the section1. (the bug appears when you scroll to section1 using the navbar, no matter if you start from the section3 or another one)

I don't know if it can help but here are what I observed:

  • These bugs only work on Safari (I use the version 13.1)
  • If I remove transform: translate(-50%, -50%) in the CSS the navbar doesn't shake anymore, font-family can also have the same behavior sometimes.
  • If I remove Jarallax everything works of course
  • When I remove the drop shadows there is no lag anymore
  • Removing bootstrap or JqueryUi doesn't change the behavior
  • Don't forget to put a background

Thank you for your help

Version used:

I use the lastest version of Jarallax v1.12.1

Code to reproduce the issue (HTML blocks + JavaScript initialization)

Here is my markup

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        </head>
    <body>
        <div id="background" class="jarallax" data-jarallax data-speed="0.05">
	    <img class="jarallax-img" src="bg.jpeg" alt="victoria falls background">
            <div class="wrapper">
                <nav>
		    <ul>
                        <li><a href="#section1">section1</a></li>
			<li><a href="#section2">section2</a></li>
			<li><a href="#section3">section3</a></li>
			<li><a href="#section4">section4</a></li>
                    </ul>
                </nav>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="content__frame">
                                <div id="section1" class="content1"></div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="content__frame">
                                <div class="content2"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="section2"></div>
                <div id="section3"></div>
                <div id="section4"></div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.5.0.min.js"   integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="   crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"   integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="   crossorigin="anonymous"></script>
        <script src="https://unpkg.com/jarallax@1/dist/jarallax.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="main.js"></script>
    </body>
</html>

style.css

html, body {
    margin: 0;
    padding: 0;
}

.content1 {
    background-image: radial-gradient(circle at 101.4% 0px, rgba(0, 0, 0, 0) 0, rgb(222,184,135, 0) 105px, white 105px);
    height: 300px;
    margin: 1000px 0px;
}

.content2 {
    background-image: radial-gradient(circle at -1.4% 0px, rgba(0, 0, 0, 0) 0, rgb(222,184,135, 0) 105px, white 105px);
    height: 300px;
    margin: 1000px 0px;
}

.content__frame {
    filter: drop-shadow(10px 10px 10px rgb(0, 0, 0, 1));
}

nav {
    font-family: Arial, Helvetica, sans-serif;
    text-align: right;
    position: fixed;
    right: 1.5%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

#section2, #section3, #section4 {
    height: 300vh;
}

main.js

(function($) {

	// Smooth scroll to the anchor
	$("nav a").bind('click', function(event) {

            var $this = $(this),
	    id = $this.attr("href"),
	    $section = $(id);
			
	        event.preventDefault();
		$("html, body").stop().animate({
			scrollTop: $section.offset().top
		 }, 1500, 'easeInOutExpo');
			
		$("html, body").on("scroll wheel DOMMouseScroll mousewheel keyup touchmove", function(){
		$("html, body").stop()});
	});

})(jQuery);
@nk-o
Copy link
Owner

nk-o commented May 21, 2020

Pen for testing https://codepen.io/_nK/pen/JjYxMXB

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nk-o @JordanFist