www.google.com - "Precipitation" and "Wind" buttons are not functional after requesting desktop mode

[webcompat-bot]

URL: https://www.google.com/search?q=meteo baaovizza

Browser / Version: Firefox Mobile 70.0 Operating System: Android 8.0.0 Tested Another Browser: Yes

Problem type: Site is not usable Description: Google offers meteo previsions with temperature and raining. it is not possible to switch from temperature to raining or wind Steps to Reproduce: Clicking the buttons nothing happens. Ok instead of the weekdays

Browser Configuration

• None

Submitted in the name of @heavyfranz

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was to reproduce the issue, after requesting desktop mode.

Affected area:

<div style="height:23px;overflow:hidden;padding:15px 0 9px">
    <div class="ksb uE5Hoc ksbs" style="display:inline-block" aria-disabled="true" id="wob_temp" role="button" tabindex="0" data-ved="2ahUKEwjP-qDY9_rkAhXHMMAKHQLGBGoQs6MEMAB6BAgKEAM">Temperature</div>
    <div class="ksb PXcN4c uE5Hoc" style="display:inline-block" aria-disabled="false" id="wob_rain" role="button" tabindex="0" data-ved="2ahUKEwjP-qDY9_rkAhXHMMAKHQLGBGoQsqMEMAB6BAgKEAQ">Precipitation</div>
    <div class="ksb PXcN4c" style="display:inline-block" aria-disabled="false" id="wob_wind" role="button" tabindex="0" data-ved="2ahUKEwjP-qDY9_rkAhXHMMAKHQLGBGoQtKMEMAB6BAgKEAU">Wind</div>
</div>

Tested with: Browser / Version: Firefox Nightly 68.2a1 (2019-09-30), Firefox Preview Nightly 190930 (🦎: 71.0a1-20190928211735) Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

Moving to Needsdiagnosis for further investigation.

[ksy36]

This is a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1556236

clientX and clientY are saved in this.FW variable in touchstart listener callback:

    s_a.VAa = function(a) {
        this.e3 && !this.e3(a) || 1 < s_dm(a).length || (this.k0a || a.stopPropagation(),
        this.tf = !0,
        this.JHa || (this.element.ontouchend = s_b(this.eV, this),
        document.body.addEventListener("touchend", s_$Ja(this), !1)),
        document.body.addEventListener("touchmove", s_aKa(this), !1),
        document.body.addEventListener("touchcancel", s_$Ja(this), !1),
        s_bKa(this),
        a = a.touches[0],
        this.FW = new s_Le(a.clientX,a.clientY),
        this.A7 ? this.iwb = window.setTimeout(s_b(this.Cm, this, !0), this.A7) : this.Cm(!0),
        this.JHa || s_9Ja(this.FW))
    }

and then they're being used in document.elementFromPoint method in the onclick callback to compare target element of the click event and touch:

    var s_cKa = function(a) {
        if (!document.elementFromPoint || !a.FW || !s_db(a.FW.x))
            return !0;
        for (var b = document.elementFromPoint(a.FW.x, a.FW.y); b; ) {
            if (b == a.element)
                return !0;
            b = b.parentNode
        }
        return !1
    }

When the page is zoomed in Firefox always returns html element when running document.elementFromPoint

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.