1261709 - Google Docs forms editor misplaces menu if touch is enabled

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P1)

Description

[Hallvord R. M. Steen [:hallvors]]

Attachment: g-docs-forms-menu-position.png

Google docs has fairly recently rolled out a new forms editor. Each form element has an associated drop-down where you can choose the type of element. This menu appears near the top of the document, not where you expect it. This is especially annoying if you scroll down, because when you get far enough you don't see the menu at all unless you scroll up again.

Comment 1

[Karl Dubost💡 :karlcow]

Having steps to reproduce the bug would be useful.
I don't know how to use Google Docs. But when I do "Start a new document" I don't see a form editor widget. So I need a kick in the right direction.

Comment 2

[Karl Dubost💡 :karlcow]

Ah found. 
You need to go to https://docs.google.com/forms/

Comment 3

[Karl Dubost💡 :karlcow]

Attachment: new-form-google-docs.png

On a clean fresh profile.

With Firefox Nightly 48.0a1 (2016-04-03) and layout.css.prefixes.webkit;false
I get the menu at the right place.

with layout.css.prefixes.webkit;true
The menu is still at the right place, even with different window widths.

So I can't reproduce for now. Maybe a step by step would help.

Comment 4

[Hallvord R. M. Steen [:hallvors]]

Steps to reproduce (sorry, it was rather late when I noticed this):

1) Log in to Google Drive
2) Choose to create a new form (may have to choose "Create -> More -> Forms" or something like that
3) Add several controls to the form to make the document long enough to scroll down
4) Scroll down and use the menu button indicated in the screenshot to change the type of the bottom-most control.

Comment 5

[Adam Stevenson [:adamopenweb]]

I tried to reproduce with 45 and 48 a couple times, but wasn't able to make it happen.

Comment 6

[Hallvord R. M. Steen [:hallvors]]

This code ends up with a very low negative value for style.top:

    _.k.kY = function (a) {
      var c = this.T().P(),
      d = LX(this).P(),
      e;
      a.style = {
        height: 'auto',
        left: - d.clientLeft + 'px'
      };
      if (1 != this.N.size() || this.Ba('alignbottom').Qb(!1)) e = c.offsetHeight;
       else {
        var f = (0, _.Ta) (DX(this).Mb(), this.N.P()),
        g = GX(this).hb(f),
        f = g.P().offsetTop,
        h = d.clientTop,
        l = _.Sg(c);
        if (this.kx) e = - f - h,
        f = _.jp(c),
        l.body == f ? (h = a.N, f = _.Mj(c).y)  : (h = f.scrollHeight || f.offsetHeight, f = _.Pj(c, f).y),
        d.offsetHeight > h ? e = - f + 1 : 0 > f + e ? e = - f + 1 : f + e + d.offsetHeight > h && (e = h - d.offsetHeight - f);
         else {
          e = _.ah().height;
          var m = _.Mj(c).y,
          n = l.body,
          l = l.documentElement,
          l = m - (new _.Lg(n.scrollLeft || l.scrollLeft, n.scrollTop || l.scrollTop)).y,
          c = c.offsetHeight,
          m = d.scrollHeight,
          g = g.P().offsetHeight,
          d = d.offsetHeight - d.clientHeight,
          q = d - h,
          n = Math.min(0.9 * e, m + d),
          d = Math.min(l, f + h, n - g - q),
          l = Math.min(e - l - c, m + q - f - g, n - g - h);
          d + l + c > n && (e = (n - c) / 2, d < e ? l = n - d - c : l < e ? d = n - l - c : l = d = e);
          e = - d;
          a.style.height = d + l + c + 'px';
          a.style.boxSizing = 'border-box';
          a.style.overflowY = 'auto';
          a.scrollTop = f - d + h
        }
      }
      a.style.top = e + 'px'

One important branching point here is if(this.kx).
Somewhere else in the code, this.kx is set to _.Fca and this again is defined as:

 _.Fca = "ontouchstart" in _.ba || !!(_.ba.document && window.document.documentElement && "ontouchstart" in window.document.documentElement) || !(!_.ba.navigator || !_.ba.navigator.msMaxTouchPoints);

So it fails if touch events are enabled.. (dom.w3c_touch_events.enabled)

Comment 7

[Mike Taylor [:miketaylr]]

Karl, given comment #6, can we talk to Google about this?

(This should possibly affect Chrome as well, but I don't have the right device to test).

Comment 8

[Kartikaya Gupta (email:[e-mail])]

I can reproduce this in Firefox both on OS X (if I set dom.w3c_touch_events.enabled=1) and a touch-enabled Windows device. I cannot reproduce in Chrome on the same touch-enabled Windows device.

Comment 9

[Mike Taylor [:miketaylr]]

Thanks Kats!

Comment 10

[Karl Dubost💡 :karlcow]

Reported to Google. Switching to sitewait.

Comment 11

[Mike Taylor [:miketaylr]]

This is still an issue.

Comment 12

[Mike Taylor [:miketaylr]]

This looks fixed, tested on a touch device and a non-touch device to verify.