play.google.com - Clicking on the more options button on a review displays the popup at a wrong position

[fiji-flo]

URL: https://play.google.com/store/apps/details?id=org.mozilla.firefox

Browser / Version: Firefox 61.0 Operating System: Linux Tested Another Browser: Yes

Problem type: Something else Description: Clicking on the more options button on a review displays the popup at a wrong position. Steps to Reproduce: Click on any more options button (the three dots) of a review.

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report @fiji-flo , the issue is indeed reproducible. Not reproducible on Chrome.

Affected area:

<div class="JPdR6b CblTmf qjTEB" jscontroller="uY3Nvd" jsaction="IpSVtb:TvD9Pc;fEN2Ze:xzS4ub;frq95c:LNeFm;cFpp9e:J9oOtd; click:H8nU8b; mouseup:H8nU8b; keydown:I481le; keypress:Kr2w4b; blur:O22p3e; focus:H8nU8b;RdYeUb:.CLIENT" role="menu" tabindex="0" jsshadow="" data-stay-open="false" style="position: absolute; max-width: 192px; max-height: 152px; left: 816px; top: 747px;" jsowner="ow95">
    <div class="XvhY1d" jsaction="mousedown:p8EH2c; touchstart:p8EH2c;" style="max-width: 192px; max-height: 152px;">
        <div class="JAPqpe" style="width: 192px; height: auto; min-width: 192px;">
            <content class="z80M1 NmX0eb" jsaction="click:o6ZaF(preventDefault=true); mousedown:lAhnzb; mouseup:Osgxgf; mouseenter:SKyDAe; mouseleave:xq3APb; touchstart:jJiBRc; touchmove:kZeBdd; touchend:VfAz8(preventMouseEvents=true)" jsname="j7LFlb" aria-checked="false" aria-label="Unhelpful" role="menuitemradio" tabindex="-1">
                <div class="aBBjbd MbhUzd" jsname="ksKsZd"></div>
                <div class="uyYuVb oJeWuf" jscontroller="cCHjWd" jsaction="JIbuQc:tUsItb" jsname="tUsItb">
                    <div class="O7wNO"></div>
                    <div class="jO7h3c">Unhelpful</div>
                </div>
            </content>
            <content class="z80M1 NmX0eb" jsaction="click:o6ZaF(preventDefault=true); mousedown:lAhnzb; mouseup:Osgxgf; mouseenter:SKyDAe; mouseleave:xq3APb; touchstart:jJiBRc; touchmove:kZeBdd; touchend:VfAz8(preventMouseEvents=true)" jsname="j7LFlb" aria-checked="false" aria-label="Spam" role="menuitemradio" tabindex="-1">
                <div class="aBBjbd MbhUzd" jsname="ksKsZd"></div>
                <div class="uyYuVb oJeWuf" jscontroller="cCHjWd" jsaction="JIbuQc:Hw9KTb" jsname="Hw9KTb">
                    <div class="O7wNO"></div>
                    <div class="jO7h3c">Spam</div>
                </div>
            </content>
            <content class="z80M1" jsaction="click:o6ZaF(preventDefault=true); mousedown:lAhnzb; mouseup:Osgxgf; mouseenter:SKyDAe; mouseleave:xq3APb; touchstart:jJiBRc; touchmove:kZeBdd; touchend:VfAz8(preventMouseEvents=true)" jsname="j7LFlb" aria-label="Link to this review" role="menuitem" tabindex="-1">
                <div class="aBBjbd MbhUzd" jsname="ksKsZd"></div>
                <div class="uyYuVb oJeWuf" jscontroller="cCHjWd" jsaction="JIbuQc:kuHRr" jsname="kuHRr">
                    <div class="jO7h3c">Link to this review</div>
                </div>
            </content>
        </div>
    </div>
</div>

Tested with: Browser / Version: Firefox Nightly 61.0a1 (2018-04-04) Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[karlcow]

deeply obfuscated code… 😢

This part seems to be close from what we are looking for.

          , P1 = function(a) {
            if (_.Ed(a.U.Hb(), a.H.ka())) {
                var b = a.H.ka().offsetParent;
                if (1 == a.R.size()) {
                    var c = _.Lf(a.R.ka());
                    var d = _.n1(a.R.ka(), a.wa);
                    b = O1(a, a.R.ka(), b || a.U.Hb().documentElement);
                    b.x = d & 4 ? b.x + (c.width - a.S.x - 1) : d & 2 ? b.x + (c.width / 2 + a.S.x) : b.x + a.S.x;
                    b.y = d & 1 ? b.y + (c.height - a.S.y) : b.y + a.S.y
                } else
                    b = a.S;
                c = b;
                d = _.Kr(a.H, ".JAPqpe").Wb(0);
                d.Bb({
                    width: "auto",
                    height: "auto"
                });
                b = _.Lf(d.ka());
                if (1 == a.R.size() && a.ha) {
                    var e = _.Lf(a.R.ka());
                    d.Bb("min-width", e.width + "px")
                }
                e = _.Lf(d.ka());
                var f = Q1(a);
                b.width = Math.ceil(b.width / a.Da) * a.Da;
                b.width = Math.max(b.width, 0);
                b.width = Math.min(b.width, f.right - f.left);
                b.width <= e.width ? b = e : (d.ka().style.width = _.Jf(b.width, !0),
                d.Bb("min-width", b.width + "px"),
                b = _.Lf(d.ka()));
                d = Q1(a);
                e = _.n1(a.H.ka(), a.Ea);
                b = _.o1(c, b, e, a.Sa, d, 13);
                c = b.rect;
                b.status & 496 && (c.top = d.top,
                c.height = d.bottom - d.top);
                _.k1(a.H.ka(), new _.ed(c.left,c.top));
                a.H.Bb("max-width", c.width + "px");
                a.H.Bb("max-height", c.height + "px");
                a = _.Kr(a.H, ".XvhY1d").Wb(0);
                a.Bb("max-width", c.width + "px");
                a.Bb("max-height", c.height + "px")
            }
        }
          , Q1 = function(a) {
            var b = a.U.Hb()
              , c = _.ud(b) || window
              , d = 0
              , e = 0;
            a = "fixed" == a.H.getStyle("position") ? null : a.H.ka().offsetParent;
            a == b.body ? (c = _.qd(c),
            d = _.m1(b.body) || _.m1(b.documentElement),
            e = b.body.scrollTop || b.documentElement.scrollTop) : a ? (c = _.Lf(a),
            d = _.m1(a),
            e = a.scrollTop) : c = _.qd(c);
            b = new _.uf(8,c.width - 16,c.height - 16,16);
            d instanceof _.ed ? (b.left += d.x,
            b.right += d.x,
            b.top += d.y,
            b.bottom += d.y) : (b.left += d,
            b.right += d,
            _.Ha(e) && (b.top += e,
            b.bottom += e));
            return b
        };

but it's very hard to diagnose and the JavaScript of the page gets into the way of the diagnosis by changing the registered events when moving in or out of the page. See https://github.com/devtools-html/debugger.html/issues/5857

[karlcow]

Let try to contact Google about it as-is.

done.

[fiji-flo]

Thanks for taking care of this. And sorry for having you look at such code :sweat_smile:

[miketaylr]

Still an issue, will re-ping Google.

[softvision-sergiulogigan]

This is no longer reproducible on Fenix.

Tested with: Browser / Version: Firefox Preview Nightly 200213 (🦎: 74.0a1-20200210093912) Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

[fiji-flo]

This still happen on Firefox 73 and 75 on Linux for me.

[karlcow]

interestingly enough, the lower the review, the higher the shift.

<div class="JPdR6b CblTmf qjTEB"
     jscontroller="uY3Nvd"
     jsaction="IpSVtb:TvD9Pc;fEN2Ze:xzS4ub;frq95c:LNeFm;cFpp9e:J9oOtd; click:H8nU8b; mouseup:H8nU8b; keydown:I481le; keypress:Kr2w4b; blur:O22p3e; focus:H8nU8b;RdYeUb:.CLIENT"
     role="menu"
     tabindex="0"
     jsshadow=""
     style="position: absolute; max-width: 192px; max-height: 192px; left: 816px; top: 1183px;"
     jsowner="ow118">
    <div class="XvhY1d"
…
</div>

oh btw. unrelated to this issue but… fastclick

  function D(a) {
    if (!a._fastclick) {
      var b = A;
      if (b)
        if (800 < g() - b.timeStamp) A = null;
        else {
          var d =
            4 >=
            Math.abs(a.clientX - b.clientX) + Math.abs(a.clientY - b.clientY);
          b.target == a.target || d
            ? (a.stopPropagation(),
              a.preventDefault(),
              "click" == a.type && (A = null))
            : (A = null);
        }
    }
  }

[cipriansv]

I retested the issue and it is still reproducible.

Tested with: Browser / Version: Browser / Version: Firefox Nightly 79.0a1 (2020-06-11) Operating System: macOS 10.15.3

[softvision-oana-arbuzov]

The issue is broken now, both on Firefox and Chrome.

Tested with: Browser / Version: Firefox Nightly 86.0a1 (2021-01-21) Operating System: Windows 10 Pro