m.alibaba.com - Unable to see the bottom of the overlay

[nahuhh]

URL: https://m.alibaba.com/product/62236531311/4k-HD-S9-Max-Support-S905X3.html

Browser / Version: Firefox Mobile 71.0 Operating System: Android 8.1.0 Tested Another Browser: Yes

Problem type: Site is not usable Description: overlapping elements Steps to Reproduce: View a product Then press begin order

Result: you are unable to scroll to where you can see the bottom

Browser Configuration

• None

From webcompat.com with ❤️

[nahuhh]

From another browser

[softvision-sergiulogigan]

Thanks for the report! I'm able to reproduce the issue. This is because of the positioning of the URL bar (I think).

Tested with: Browser / Version: Firefox Fenix (Preview) 2.0.0 Operating System: OnePlus 6 (Android 9) - 1080 x 2280 pixels, 19:9 ratio (~402 ppi pixel density)

Moving to Needsdiagnosis.

[softvision-sergiulogigan]

STR:

1. Go to https://m.alibaba.com/product/62236531311/4k-HD-S9-Max-Support-S905X3.html
2. Tap on the "Choose your specifications" button.
3. Scroll to the bottom.

[karlcow]

this can be reproduced on RDM and the difference is shown in between Firefox devtools and chrome devtools.

The data are comming from an iframe.

<div class="iframe-wrap" style="bottom: 100px;">
  <iframe id="select-sku-iframe" class="select-sku-iframe" src="/sku?productId=62236531311" data-spm-anchor-id="a2706.7835515.0.i9.235513396V3kMm" data-spm-act-id="a2706.7835515.0.i9.235513396V3kMm"></iframe>
</div>

as we can see the .iframe-wrap is set 100px from the bottom. To push it from the #bottom-actions bar

<div id="bottom-actions" data-id="123" data-aplus-ae="1" data-spm-anchor-id="a2706.7835515.0.i8.235513396V3kMm">
  <div class="bottom-actions-wrap">
    <div style="height: 109px;" class="bottom-actions-height-placeholder"></div>
    <div class="bottom-actions">
      <div id="bottom-actions-placeholder" class="bottom-actions-placeholder">
        <div>
          <span class="highlight">2</span>Pieces, Product Price:
          <span class="highlight">US $59.98</span>
        </div>
        <div>Will ship out within 15 days</div>
      </div>
      <div class="bottom-actions-btns">
        <span data-ck="wap_chat" data-page="detail" data-schema-params="action=chatNow" class="actionsBtn chat weak new-download-app">Chat Now</span>
        <a href="javascript:;" class="actionsBtn send_inquiry strong">Send Inquiry</a>
        <a href="javascript:;" class="actionsBtn buy_now strong">Start Order</a>
      </div>
    </div>
  </div>
</div>

On my rdm the bottom actions box is 109px high. On chrome, this is 108px. And there is also an overlapping.

an ah this is happening inside the iframe on

<div id="app">
  <div class="select-sku" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%;">
    <div class="product-info-container">
      <div class="product-info-wrap">
         …
      </div>
    </div>
  </div>
</div>

.select-sku {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

if I remove this

/* index.css | https://assets.alicdn.com/g/msite/sku/0.0.31/pages/sku/index.css */

.select-sku {
  /* height: 100%; */
}

The scroll is happening.

another way to fix it is

/* index.css | https://assets.alicdn.com/g/msite/sku/0.0.31/pages/sku/index.css */

.select-sku .select-sku-container {
  /* overflow: scroll; */
}

somehow applying an overflow: scroll changes the natural scrolling height of the flex box. Not sure why. @dholbert ? It also seems to deactivate the padding-bottom.

I think that's the difference between chrome and firefox!

while chrome gets a meaningful padding-bottom, firefox ignores it.

Not sure what the spec says in this circumstance.

Ah would it be https://bugzilla.mozilla.org/show_bug.cgi?id=1527949

[dholbert]

Yeah, if the padding-bottom is key here and it's on a scrollable element, then https://bugzilla.mozilla.org/show_bug.cgi?id=1527949 would be the explanation/solution.

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1527949

[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.