在 Chrome 中打开文件对话框之前，可以多次单击文件输入

Question

我有一个文件输入包裹在一个按钮中，如下所示。

.fileUploadButton input[type="file"] {
    right: 0;
    top: 0;
    font-size: 100px;
    position: absolute;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.btn-success:hover {
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
}

.fileUploadButton {
    position: relative;
    overflow: hidden;
}

    <span class="btn btn-success fileUploadButton">
        File Upload Button
        <input type="file" name="file" accept="application/zip">
    </span>

有时单击此按钮后，文件对话框会在 10 秒左右的延迟后打开。在等待文件对话框打开时，UI 不会被阻止，并且可以多次单击按钮，这会导致在关闭另一个文件对话框后打开更多文件对话框。

这似乎是第一次发生，并且仅在 Chrome 会话中发生一次，之后我无法重现它。它无法以明确的方式复制。我在包括 59 版在内的多个 Chrome 版本中都观察到了这一点。

这是一个已知的错误吗？有什么解决方法吗？重现的最终步骤是否已知？

编辑：

Answer 1

我认为这是因为您的硬盘处于睡眠模式。它停止了。每当您单击文件按钮时，您都会要求浏览器要求操作系统访问文件系统，并且操作系统必须唤醒磁盘。它需要几秒钟才能启动、初始化访问和所有操作。显然，SSD 驱动器不会发生这种情况。