Status of safari and firefox mobile touch inputs?

Questions
21

This is why I fight every day to protect backward compatibility

2 Likes
22

Well, since you mention it, looks like Iā€™ll have a chance to try again here soonā€¦

ā€¦ yep, nope - out of time. I just donā€™t have cycles. Sorry.

confirmed: 60fps across all devices.

making a movie.

v4 in v2.

Do look forward to BABYLON.FlyCamera

23

@Deltakosh chat with someone, said webkit safari has an upcoming release, with possible improvements in webgl 2 - via ANGLE overrides. I donā€™t know if it helps, thought to pass along.

Under the dramatic title is:

ā€œbasically all thatā€™s needed to support WebGL 2.0 in Safari is to compile in ANGLEā€

Hereā€™s the docā€¦ https://www.khronos.org/webgl/public-mailing-list/public_webgl/1803/msg00004.php

: )

2 Likes
24

Okay, so
Including the pointer events polyfill:

<script src ="https://code.jquery.com/pep/0.4.3/pep.js"

and then marking the divs I want to hit with an explicit touch-action attribute:

<div touch-action="auto"

catches pointer events (pointerdown, pointerup etc).
Using this global css style:

*{
-webkit-overflow-scrolling: touch;
}

thankfully fixes the awful bounce scroll behavior.
Bonus:

-webkit-tap-highlight-color: transparent;

(as well as user-select: none and all its namespaces) gets rid of the ugly selection rectangle left over from using divs as buttons (on all browsers).

I was using the pointer event offsets to get the coordinates of the hit within the div (e.offsetX, e.offsetY), which donā€™t exist on safari or firefox mobile, and are not simulated by pep, so finally something like this:

if (!e.offsetX) {
 var target = e.target || e.srcElement,
 rect = target.getBoundingClientRect(),
 offsetX = e.clientX - rect.left,
 offsetY = e.clientY - rect.top;
 e.offsetX = offsetX;
 e.offsetY = offsetY;

}

gets both firefox and safari mobile working with the correct div offset.

Sadly this last bit runs like itā€™s throttled, so I will have to architect something manually to achieve the effect I desireā€¦ Nice to be at least functional across the board though.

2 Likes