-2

I have just finished working on this website for insect cereal (yup...) and whilst the website seems to work perfectly well on edge, safari, and firefox it has a continuous long scroll on chrome well after it is supposed to end (right after the footer). I'm sure this has a very simple fix, but I'm very rusty when it comes to coding and can't seem to find it.

Thanks in advance.

criketos
  • 11
  • 1
  • Remove `bounceInUp` from your ` – roberrrt-s Nov 22 '16 at 12:48
  • You are required to post a minimal example that shows the problem here. Links to your web site, or any third-party, are not acceptable and will eventually get this question removed. http://stackoverflow.com/help/mcve – Rob Nov 22 '16 at 13:04

3 Answers3

1

Alright, in addition to all answers here, this question was actually really fun to tackle, let's break it down:

The problem

Your footer length is being caused by the class bounceInUp added to your #button-white in content-section-d I found this by deleting sections and child nodes in DevTools until I pin-pointed your problem.

The cause

The reason this doesn't work in Chrome is because transforms like these (using animate.css) are ment for inline elements, your <button> isn't one, and you should apply custom CSS to change it, so:

button-white {
    display: inline-block;
    margin-top: 30px;
    background: white;
    color: #02E0C6;
    border: none;
    border-radius: 0%;
    padding: 15px 15px 15px 15px;
}

In addition to the other answers, you should check your code for invalid syntax as well. There's a lot that can break in different browsers.

roberrrt-s
  • 7,914
  • 2
  • 46
  • 57
0

Look like you have problems with markup

<body>
  <header>
 <nav class="navigation navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img id="brand" class="img-circle" alt="Brand" src="http://i.imgur.com/0fIyMnA.png">
      </a>
      <h1 id="Criks" class="navbar-text">Criketos </h1>

    </div>
    <button id="navButton" class="navbar-text navbar-right btn btn-info">Buy Now</button>

 </a> **<----------- what is it?**

  </div>
</nav>
</header>

<body>

....

</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
 <script src="index.js"></script>
</body>

</html>
degr
  • 1,559
  • 1
  • 19
  • 37
  • This is not the problem. – roberrrt-s Nov 22 '16 at 12:44
  • Why you think so? There is +100500 unclosed or unnecessary closed tags, two body tags ... etc. If you have invalid markup, all browsers will show different result. – degr Nov 22 '16 at 12:45
  • 1
    Because HTML has an extremely good fallback for bad usage of HTML tags. His main problem is `#button-white` with the class `bounceInOut` – roberrrt-s Nov 22 '16 at 12:46
  • I'm not saying that this shouldn't be addressed, degr, just that this is not the cause of his problem :). – roberrrt-s Nov 22 '16 at 12:46
  • A way to check this if there's no immediate cause for weird stuff like this is to delete sections in DevTools, until you 'remove' the problem, then continue to pinpoint deleting child nodes until you find the culprit. – roberrrt-s Nov 22 '16 at 12:49
0

What about if you try removing 

height: 100%

from html element in CSS

Elliottgg
  • 64
  • 1
  • 4