I'm trying to setup pointer events cross-browser. Now, most browser support it already, but safari on iOs doesn't. So I'm trying to polyfill this with pep-js without much success. Here is my test-code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pep/0.4.0/jquery.pep.min.js"></script>
<meta charset="utf-8">
<style>
.pixel {position: absolute;background: black;width: 2px;height:2px;}
#canvas {margin: 20px;background: white;border: 1px solid black;height: 200px;}
</style>
</head>
<body>
<div id="canvas" touch-action="none"></div>
<script>
function draw(where) {
var div = document.createElement('div');
div.classList.add('pixel');
div.setAttribute('style', 'left:'+where.pageX + 'px;top:'+where.pageY+'px');
document.querySelector('#canvas').appendChild(div);
}
document.querySelector('#canvas')
.addEventListener('pointermove', function(event) {
draw(event);
});
</script>
</body>
</html>
or an other one I've created on jsffidle
On the desktop it works like a charm, but safari on iOS it doesn't. Any suggestion what I'm doing wrong?
It looks like you are using the wrong library.
You use jquery.pep.js but probably want PEP. It's an unfortunate clash in naming.