web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-03-17 21:18:27 +02:00
Code Releases Activity

fix(dom): account for translated parent in pointer position on iOS (#7079)

Browse Source 
Since we switched to using adding up offsets to calculate the pointer position relative to the current element, we've had some issues, particularly on iOS, where a translated parent would cause us to miscalculate the position. This is currently a quickfix for the issue, and I'd like to spend some time to figure out a better solution that hopefully won't require us to iterate through the DOM and add up the transform matrix.
This commit is contained in:
Gary Katsevman 2021-02-04 11:33:25 -05:00 committed by GitHub
parent 541f2e584b
commit 542cead6ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/js/utils/dom.js
View File

@ -8,6 +8,7 @@ import fs from '../fullscreen-api';
import log from './log.js';
import {isObject} from './obj';
import computedStyle from './computed-style';
import * as browser from './browser';
/**
* Detect if a value is a string with any non-whitespace characters.
@ -608,6 +609,33 @@ export function findPosition(el) {
*
*/
export function getPointerPosition(el, event) {
const translated = {
x: 0,
y: 0
};
if (browser.IS_IOS) {
let item = el;
while (item && item.nodeName.toLowerCase() !== 'html') {
const transform = computedStyle(item, 'transform');
if (/^matrix/.test(transform)) {
const values = transform.slice(7, -1).split(/,\s/).map(Number);
translated.x += values[4];
translated.y += values[5];
} else if (/^matrix3d/.test(transform)) {
const values = transform.slice(9, -1).split(/,\s/).map(Number);
translated.x += values[12];
translated.y += values[13];
}
item = item.parentNode;
}
}
const position = {};
const boxTarget = findPosition(event.target);
const box = findPosition(el);
@ -619,6 +647,10 @@ export function getPointerPosition(el, event) {
if (event.changedTouches) {
offsetX = event.changedTouches[0].pageX - box.left;
offsetY = event.changedTouches[0].pageY + box.top;
if (browser.IS_IOS) {
offsetX -= translated.x;
offsetY -= translated.y;
}
}
position.y = (1 - Math.max(0, Math.min(1, offsetY / boxH)));