以下のテスト コードで [ファイルをアップロード] を押すと、ボタンのテキストが [アップロード中...] に変わりますが、Safari では変わりません。十分に大きなファイルを選択すると、ボタンを観察する時間ができます。map div をコメントアウトすると、すべて正常に動作します。
分離されたテスト コードは次のとおりです。マップが原因である可能性があることを確認するのに半日かかりましたが、さらに深く掘り下げる必要があります。興味深いことに、同じコードを JSfiddle にコピーしてもバグは再現されないため、独自の html ファイルを作成する必要があります。
<!DOCTYPE html>
<html>
<head>
<title>Google Map interfering with button event in Safari</title>
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
function init() {
var options = {
zoom: 8,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<form action="http://localhost" method="POST" enctype="multipart/form-data">
<!--comment map to see correct button behaviour in Safari-->
<div id="map" style="width:300px;height:300px"></div>
<p><small>Very large file please:</small> <input type="file" name="big"></p>
<button onclick="this.innerHTML='Uploading...'">Upload your file</button>
</form>
</body>
</html>
以前にも SO に関する同様の質問がありましたが、解決策はありませんでした。