Bootstrap 3 weird affix issue on chrome

Question

So I am trying to use the bootstrap affix feature but it acts weird. When you try to scroll down past the header section it automatically goes to the top. This happens when the screen width is below 1100px. Also its only on Chrome when you scroll with the scroll bar. I have a bootply setup to demonstrate whats happening. So can anybody please help me figure out whats going on?

Watching this video might help.

CSS:

header {
                height: 365px;
                background: url("http://i.imgur.com/wU2YhOJ.png");
                background-color: #262626;
                background-size: cover;
                background-position: center;
            }

            header h1{
                font-family: Montserrat, sans-serif !important;
                font-size: 5.5em;
                color: white;
                word-break: normal;
                padding-top: 115px;

            }

            body h1 {
                font-family: 'Lato', sans-serif;
                line-height: 72px;
            }

            body, footer { font-family: 'Open Sans', sans-serif !important; }

            body p { line-height: 28px; }

            footer { background-color: #262626; }

            .fixed {
                position: fixed;
            }

            /* sidebar */
            .bs-docs-sidebar {
                padding-left: 20px;
                margin-top: 60px;
                margin-bottom: 20px;
            }

            /* all links */
            .bs-docs-sidebar .nav>li>a {
                color: #999;
                border-left: 2px solid transparent;
                padding: 4px 20px;
                font-size: 13px;
                font-weight: 400;
            }

            /* nested links */
            .bs-docs-sidebar .nav .nav>li>a {
                padding-top: 1px;
                padding-bottom: 1px;
                padding-left: 30px;
                font-size: 12px;
            }

            /* active & hover links */
            .bs-docs-sidebar .nav>.active>a, 
            .bs-docs-sidebar .nav>li>a:hover, 
            .bs-docs-sidebar .nav>li>a:focus {
                color: #262626;                 
                text-decoration: none;          
                background-color: transparent;  
                border-left-color: #262626; 
            }
            /* all active links */
            .bs-docs-sidebar .nav>.active>a, 
            .bs-docs-sidebar .nav>.active:hover>a,
            .bs-docs-sidebar .nav>.active:focus>a {
                font-weight: 700;
            }
            /* nested active links */
            .bs-docs-sidebar .nav .nav>.active>a, 
            .bs-docs-sidebar .nav .nav>.active:hover>a,
            .bs-docs-sidebar .nav .nav>.active:focus>a {
                font-weight: 500;
            }

            /* hide inactive nested list */
            .bs-docs-sidebar .nav ul.nav {
                display: none;           
            }
            /* show active nested list */
            .bs-docs-sidebar .nav>.active>ul.nav {
                display: block;           
            }
            /* special back to top styling */
            .back-to-top:hover,
            .back-to-top:focus{
                border-left-color: transparent !important;
            }

HTML:

<div class="col-sm-2" id="body-right">
                    <nav class="col-xs-3 bs-docs-sidebar">
                        <ul id="sidebar" class="nav nav-stacked fixed">
                            <li>
                                <a href="#GroupA">Getting Started</a>
                                <ul class="nav nav-stacked">
                                    <li><a href="#GroupASub1">Sub-Group 1</a></li>
                                    <li><a href="#GroupASub2">Sub-Group 2</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#GroupB">Font Awesome</a>
                                <ul class="nav nav-stacked">
                                    <li><a href="#GroupBSub1">Sub-Group 1</a></li>
                                    <li><a href="#GroupBSub2">Sub-Group 2</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#GroupC">Bootstrap</a>
                                <ul class="nav nav-stacked">
                                    <li><a href="#GroupCSub1">Sub-Group 1</a></li>
                                    <li><a href="#GroupCSub2">Sub-Group 2</a></li>
                                </ul>
                            </li>
                            <li><span>&nbsp</span></li>
                            <li>
                                <a class="back-to-top" href="#header">Back to top</a>
                            </li>
                        </ul>
                    </nav>  
                </div>

Answer 1

I don't know how this happens, but after playing with the bootply for some time. I have a fix.

I think what causes it is the box-sizing:border-box at bootstrap.min.css (line 7).

Either changing that, or overriding it to box-sizing:content-box seem to fix this issue.

If you have a custom CSS file, use the following class to override Bootstrap.

* {
    box-sizing:content-box;
}