Problema con affisso Bootstrap 3 strano su chrome

Question

Quindi sto cercando di utilizzare la funzione di avvio di bootstrap ma si comporta in modo strano. Quando si prova a scorrere verso il basso oltre la sezione dell'intestazione, questa viene automaticamente spostata in alto. Ciò accade quando la larghezza dello schermo è inferiore a 1100 px. Inoltre è solo su Chrome quando si scorre con la barra di scorrimento. Ho un setup bootply per dimostrare che cosa sta succedendo. Quindi qualcuno può aiutarmi a capire cosa sta succedendo?

Guardando questo video potrebbe aiutare.

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

Non so come questo accade .. ma dopo aver giocato con la bootply per qualche tempo. Ho una soluzione.

Penso che sia la causa dello box-sizing:border-box allo bootstrap.min.css (line 7).

O modificarlo, o sovrascriverlo su box-sizing:content-box sembra risolvere questo problema.

Se si dispone di un file css personalizzato, utilizzare la classe seguente per sovrascrivere il bootstrap.

* { 
    box-sizing:content-box; 
} 

Spero che questo aiuti