title: Why datepicker dissapears when scrolling the page?
body: <p>On mobile with safari browser after I show my datepicker (clicking) then if I scroll down to page my datepicker is not appear anymore what can be my issue ?</p>
  
  <p>I'm looking for a way to fix it datepicker ui issue but I couldn't get any result for a week what can be issue please ? </p>
  
  <p>the problem only happens mobile safari browser</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function datePicker(){
     
        
          var dateFormat = "mm/dd/yy",
              from = $( "#checkin,.checkin" )
                  .datepicker({
                      numberOfMonths: 2,
                      firstDay: 1,
                      minDate: 0,
                      beforeShow:function(){
                          $(this).datepicker("widget").addClass("main-datepicker");
                      }
                  })
                  .on( "change", function() {
                      to.datepicker( "option", "minDate", getDate( this ) );
                  }),
              to = $( "#checkout,.checkout" ).datepicker({
                  numberOfMonths: 2,
                  firstDay: 1,
                  minDate: 0,
                  beforeShow:function(){
                      $(this).datepicker("widget").addClass("main-datepicker");
                  }
              })
              .on( "change", function() {
                  from.datepicker( "option", "maxDate", getDate( this ) );
              });
  
          function getDate( element ) {
              var date;
              try {
                  date = $.datepicker.parseDate( dateFormat, element.value );
              } catch( error ) {
                  date = null;
              }
  
              return date;
          }
     
  }
  
  datePicker();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/&gt;
  
  &lt;input type="text" id="checkin"&gt;
  &lt;input type="text" id="checkout"&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://www.anitur.com/ucak-bileti" rel="nofollow noreferrer">Live Demo</a></p>