滚动页面时为什么datepicker消失了？

Question

在我显示我的日期选择器（点击）之后在带有safari浏览器的移动设备上然后如果我向下滚动到页面我的日期选择器不再出现可能是我的问题了吗？

我正在寻找一种方法来修复它的datepicker ui问题，但我一周都没有得到任何结果可能会有什么问题吗？

问题只发生在移动safari浏览器

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();

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<input type="text" id="checkin">
<input type="text" id="checkout">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Live Demo