Fix wrong touch area in mobile chrome (#10)

* 🐛 fix wrong touch area in mobile chrome

* 🐛 add reference about issue #44
This commit is contained in:
Deardrops 2017-09-08 01:25:34 +08:00 committed by webxoss
parent a9c999cfd2
commit 04c6dc89bb
2 changed files with 27 additions and 0 deletions

View file

@ -226,6 +226,7 @@
<audio id="audio-bgm" loop></audio> <audio id="audio-bgm" loop></audio>
<audio id="audio-sound-effect" autoplay></audio> <audio id="audio-sound-effect" autoplay></audio>
<script src="./lib/ployfill.js"></script>
<script src="./lib/easeljs-0.8.2.min.js" defer="defer"></script> <script src="./lib/easeljs-0.8.2.min.js" defer="defer"></script>
<script src="./socket.io.min.js" defer="defer"></script> <script src="./socket.io.min.js" defer="defer"></script>
<script src="./CardInfo.js" defer="defer"></script> <script src="./CardInfo.js" defer="defer"></script>

26
lib/ployfill.js Normal file
View file

@ -0,0 +1,26 @@
'use strict'
// fix issue webxoss/webxoss-core#44 - wrong touch area in mobile chrome
// issue discussion in Easel.js - https://github.com/CreateJS/EaselJS/issues/598#issuecomment-176299538
// learn more about this bug - https://bugs.chromium.org/p/chromium/issues/detail?id=489206
// fix method reference - https://stackoverflow.com/questions/41841704/
var mobileDevice = /Android|iPhone|/i.test(navigator.userAgent)
var chromeVersion = +(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./) || [])[2];
if (mobileDevice && chromeVersion && chromeVersion < 61) {
try {
Object.defineProperty(window, 'pageXOffset', {
get: function() {
return -document.documentElement.getBoundingClientRect().left;
},
});
Object.defineProperty(window, 'pageYOffset', {
get: function() {
return -document.documentElement.getBoundingClientRect().top;
},
});
} catch (e) {
console.error(e);
}
}