From 4c58835e4df6d0563e0986f4173afe3eb69cf343 Mon Sep 17 00:00:00 2001 From: Joey Parrish Date: Thu, 1 Oct 2020 08:04:59 -0700 Subject: [PATCH] fix(ui): Fix hiding controls on mobile after touch On pointerless touch-screen devices, :hover queries on an element do not make sense. In spite of this, they can pass on such devices after a touch event, and elements even get stuck in this false :hover state. Now we check if the device supports hovering before making the :hover query on individual elements, which fixes the hiding on controls on mobile after a touch event. Closes #2886 Backported to v2.5.x Change-Id: I5ae0b0c84c69961c33df5e50f480b53495ab2694 --- ui/controls.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/ui/controls.js b/ui/controls.js index 6c99736d50..4e1cc4ca62 100644 --- a/ui/controls.js +++ b/ui/controls.js @@ -968,6 +968,14 @@ shaka.ui.Controls.prototype.onMouseStill_ = function() { * @private */ shaka.ui.Controls.prototype.isHovered_ = function() { + if (!window.matchMedia('hover: hover').matches) { + // This is primarily a touch-screen device, so the :hover query below + // doesn't make sense. In spite of this, the :hover query on an element + // can still return true on such a device after a touch ends. + // See https://bit.ly/34dBORX for details. + return false; + } + return this.showOnHoverControls_.some((element) => { return element.matches(':hover'); });