Bs 4.0 dropdown bug on chrome? : So i've came accross a really weird compatibility issue, i'm using a dropdown for a sidenav menu with bootsrap 4.0 beta, and it works perfectly fine on firefox, but on chrome i have a problem :

Basically right when the page loads, if you click the dropdown button it will go up as if it had an invisible negative margin-top, but then when you scroll the page just a bit, and you reclick it, the dropdown will display normally .... 

Here is a sample of the code i'm using 

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

    </head>
    <body>
         <div class="jumbotron" style="background-color:transparent">
            <img src="img/logo.png">
               <div id="titre">
                     <h1>My Website</h1><br>
               </div>
        </div>
        <div id="wrapper" class="row">
            <div class="col-md-2">
                <div class="dropdown show">
                  <button class="btn  dropdown-toggle ml-md-1" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Choose an option
                  </button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                      <ul class="list-group">
                        <li class="dropdown-item list-group-item">Option 1</li>
                        <li class="dropdown-item list-group-item">Option 2</li>
                        <li class="dropdown-item list-group-item">Option 3</li>
                        <li class="dropdown-item list-group-item">Option 4</li>
                        <li class="dropdown-item list-group-item">Option 5</li>
                        <li class="dropdown-item list-group-item">Option 6</li>
                        <li class="dropdown-item list-group-item">Option 7</li>
                        <li class="dropdown-item list-group-item">Option 8</li>
                        <li class="dropdown-item list-group-item">Option 9</li>
                        <li class="dropdown-item list-group-item">Option 10</li>
                      </ul>
                  </div>
                </div>
            </div>
            <div class="schedulePanel col-md-8">
            </div>
            <div class="col-md-2" >
                <div id="mydiv">
                </div>
            </div>
        </div>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
     </body>
     </html>

<!-- end snippet -->

