JQuery datepicker 在移动设备上显示为空白，直到被点击

Question

我有一个用 HTML 编写的非常简单的日期选择器，如下所示：

<input id="dob" class="dob-bar" type="date" name="trip-start">

这是CSS：

.dob-bar {
    border: none;
    width: 10em;
    height: 2.5em;
    padding: 5, 5, 5, 5;
    padding-left: 15px;
    padding-right: 18px;
    border-radius: 18px;
    resize: none !important;
    position: relative;
    left: 0;
    right: -12em;
    top: 1em;
    box-shadow: 0 3px 2px rgb(60 64 67 / 30%), 0 1px 3px 2px rgb(60 64 67 / 15%);
}

在真实的移动设备上，它看起来是这样的：

相比之下，这是在模拟移动设备上的样子（来自 Chrome devtools）：

我怎样才能解决这个问题？