1884131 - Redirected to a broken login page when searching on taobao.com

Status: REOPENED

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

Description

[Calin Tanase (OOO until 22nd of Nov)]

Attachment: taobao FF vs Chrome.mp4

Environment:
Operating system: OnePlus 6 A6000 (Android 11)
Firefox version: Nightly 125.0a1-20240306095835

Steps to reproduce:

1. Go to https://main.m.taobao.com
2. Tap on the search bar.
3. Tap again on the search bar when redirected.
4. Search for anything.
5. Observe the login page.

Expected Behaviour:
The buttons are displayed on the login page.

Actual Behaviour:
The buttons are missing from the login page.

Notes:

1. Screen rec attached
2. Reproducible on Firefox Release as well
3. Reproducible regardless of the ETP status
4. Not reproducible on Chrome
5. Workaround: refreshing the page displays it correctly
6. The search page is also broken until the login page is refreshed (home icon missing from the header)
7. Issue found during WebCompat team [Top100] websites testing

Comment 1

[Daniel Holbert [:dholbert]]

So these elements are there, but they're inside a 100%-height-iframe which lives inside of this element in the top-level page:

<div style="
  transform: scale(1) translateZ(0px);
  transform-origin: 0px 0px 0px;
  width: 414px; height: 468px;
  z-index: 2147483647;
  position: fixed; left: 0px; top: 0px;
  background: rgb(255, 255, 255);
  display: block;"
  class="J_MIDDLEWARE_FRAME_WIDGET">

This element has a limited height (note height: 468px;) which the iframe takes on via its 100% height; and that isn't tall enough to show all of the content, so the buttons overflow off the bottom of the iframe and don't end up being visible.

Comment 2

[Daniel Holbert [:dholbert]]

If I reload the login page after hiding the keyboard, then it renders just fine, and this J_MIDDLEWARE_FRAME_WIDGET element has height:788px instead.

I think the issue is that the page is sizing this J_MIDDLEWARE_FRAME_WIDGET element to fit the available screen space, measured via some sort of JS query of the page layout. And at-the-moment-of-pageload, the on-screen-keyboard is taking up half the screen, so the J_MIDDLEWARE_FRAME_WIDGET element ends up using a size that's much smaller than the actual screen.

Comment 3

[Daniel Holbert [:dholbert]]

I haven't debugged their JS to see how they come up with their magic specified-height for this J_MIDDLEWARE_FRAME_WIDGET element (whether 788px or 468px), but given that this is about the keyboard stealing screen real-estate from an element that's meant to be ~full-screen, I'd bet this is a version of bug 1007286. (See e.g. testcases on my dupe bug 1826410.)

Comment 4

[Hiroyuki Ikezoe (:hiro)]

Daniel is right. I tried the site on my local built Fenix with the patch series for bug 1831649 and an additional change to make resizes-visual as the default interactive-widget value, it works fine.

Comment 5

[Jeff Muizelaar [:jrmuizel]]

Calin, can you try reproducing on Nightly?

Comment 6

[Calin Tanase (OOO until 22nd of Nov)]

No longer reproduces on the latest Nightly.

Environment:
Operating system: OnePlus 6 A6000 (Android 11)
Firefox version: Nightly 132.0a1-20240904095513

Comment 7

[Botond Ballo [:botond]]

Reopening as discussed in bug 1842574 comment 11, to reflect that the release version is still affected until bug 1916002 is fixed.