m.intl.taobao.com - The quantity value is hardly visible

[softvision-oana-arbuzov]

URL: https://m.intl.taobao.com/detail/detail.html?id=662245000259

Browser / Version: Firefox Nightly 99.0a1 (🦎 99.0a1-20220210065747), Firefox 100
Operating System: Google Pixel 5 (Android 12) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items not fully visible

Prerequisites:
Signed into Taobao account (using email and password), or phone number and verification code (link).

Steps to reproduce:

1. Navigate to https://m.intl.taobao.com/detail/detail.html?id=662245000259
2. Tap the "加入购物车" button (yellow button from bottom side).
3. Choose the desired options and add the product to the cart using the same "加入购物车" button.
4. After the product is added to the cart, tap the "Cart" icon (top right side).
5. Increase the number of products in the cart (e.g 6).
6. Observe the quantity element.

Expected Behavior:
The quantity value is fully visible.

Actual Behavior:
The quantity value is hardly visible, it is overlapped by the increase/decrease number value button.

Notes:

1. Screenshot attached.
2. The issue is not reproducible on Chrome.

Affected area:

<div class="edit-quantity" data-reactid=".0.1.$allItemv2_1.$bundlev2_s_436496515.1:$group_i_436496515.2:$itemv2_3789704448676.0.0.1.0.1.2.1">
  <p class="btn-minus" data-reactid=".0.1.$allItemv2_1.$bundlev2_s_436496515.1:$group_i_436496515.2:$itemv2_3789704448676.0.0.1.0.1.2.1.0">
    <a class="btn minus off" min="1" data-reactid=".0.1.$allItemv2_1.$bundlev2_s_436496515.1:$group_i_436496515.2:$itemv2_3789704448676.0.0.1.0.1.2.1.0.0"></a>
  </p>
  <p class="btn-input" data-reactid=".0.1.$allItemv2_1.$bundlev2_s_436496515.1:$group_i_436496515.2:$itemv2_3789704448676.0.0.1.0.1.2.1.1">
    <input type="number" max="99999999" min="1" value="1" data-reactid=".0.1.$allItemv2_1.$bundlev2_s_436496515.1:$group_i_436496515.2:$itemv2_3789704448676.0.0.1.0.1.2.1.1.0">
  </p>
  <p class="btn-plus" data-reactid=".0.1.$allItemv2_1.$bundlev2_s_436496515.1:$group_i_436496515.2:$itemv2_3789704448676.0.0.1.0.1.2.1.2">
    <a class="btn plus" max="99999999" data-reactid=".0.1.$allItemv2_1.$bundlev2_s_436496515.1:$group_i_436496515.2:$itemv2_3789704448676.0.0.1.0.1.2.1.2.0"></a>
  </p>
</div>

Watchers:
@softvision-oana-arbuzov
@softvision-raul-bucata

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Proposal: Removing the width: .58667rem;, the quantity is no longer overlapped by the increase/decrease number value button

.o-t-item .item-info .edit-quantity .btn-input {
  width: .58667rem;
}

[inv_06/2022]

[denschub]

Technically a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=966844, but we can fix that with an intervention:

.o-t-item .item-info .edit-quantity .btn-input input[type="number"] {
  appearance: textfield;
}

I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1754473 for the intervention. As for this bug, the site can do the same adjustment as well, so I'll move this to needscontact.

---

Btw, thanks @softvision-oana-arbuzov for always pasting the HTML. I debugged too much, and they don't like my traffic anymore, so they force-redirect me to the login form. But I was able to reconstruct everything from the HTML you pasted, so that was super helpful. :)

[webcompat-bot]

Generate outreach template

[softvision-oana-arbuzov]

@denschub unfortunately, the issue still occurs regardless if the intervention is enabled or not.

Tested with:
Browser / Version: Firefox Nightly 100.0a1 (🦎 100.0a1-20220316095231)
Operating System: Google Pixel 5 (Android 12) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

[sv-calin]

The page renders correctly regardless of the ua overrides/interventions status.

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

Based on the above, the ua overrides/interventions can be removed: https://bugzilla.mozilla.org/show_bug.cgi?id=1818220

[inv_08/2023]