booth.pm - site is not usable

[masayuki-nakano]

URL: https://booth.pm/ja/items/622441

Browser / Version: Firefox Mobile (Tablet) 61.0 Operating System: Android 7.0 Tested Another Browser: No

Problem type: Site is not usable Description: Cannot tap "レジに進む" link of the next page which is shown you tap "カートに入れる" button Steps to Reproduce:

1. go to https://booth.pm/ja/items/622441
2. tap red button "カートに入れる" (meaning add to cart)
3. tap blue-green link (looks like flat button) "レジに進む"

Then, should be moved to login page. However, in most cases, tapping the link does nothing or just activate the link. Rarely, I succeeded to move to next page.

From webcompat.com with ❤️

[masayuki-nakano]

Looks like that tapping the link causes reflow or something and that cancels the link's default action. But I have no idea which event handler affects to this issue.

I don't have any problem on desktop.

[softvision-oana-arbuzov]

Thanks for the report @masayuki-nakano, I was able to reproduce the issue when tapping the "Checkout" button the first time. Workaround: Tapping the "Checkout" button twice redirects to "Sign in/Sign up" page.

Affected area:

<a data-no-turbolink="true" data-tracking="checkout" data-via="market" class="btn submit full-length go-to-next condensed" href="https://checkout.booth.pm/checkout/step1?uuid=77c6444b-e8fa-46d9-a5e2-6463c889a13b">
    <div class="cmd-label">Checkout</div>
    <i class="icon-arrow-open-right bigger"></i>
</a>

Click EV

function() {
  var n;
  return e.each(function() {
    return $.fn.ec.addProduct($(this).data())
  }), ga("default.ec:setAction", "checkout", {
    step: 1
  }), (t = $(this).data()).via ? (n = t.via, ga("default.send", "event", "ec/AjaxCart", "submit via " + n)) : ga("default.send", "event", "ec/AjaxCart", "submit")
}

Note: When adding product to Cart: Console

Loading failed for the <script> with source “https://banner.buyee.jp/script/a2b-booth-to-page.js?v=1522315685398”. cart:1 

Tested with: Browser / Version: Firefox Mobile Nightly 61.0a1 (2018-03-28) Operating System: Samsung Galaxy Tab S3 (Android 7) - 1536 x 2048 pixels, 4:3 ratio (~264 ppi density), Google Pixel (Android 8.0.0) - 1080 x 1920 pixels (~441 ppi pixel density), Samsung Galaxy S7 Edge (Android 7.0) - 1440 x 2560 pixels (~534 ppi pixel density)

Moving to Needsdiagnosis for further investigation.

[karlcow]

in https://asset.booth.pm/assets/application-4b47c3ab02e5c7fb38acbc706f8718c4dc93d7f8084a9caafbb2e162a81ee053.js

            $('[data-tracking=checkout]').on('click', function() {
              var n;
              return e.each(function() {
                  return $.fn.ec.addProduct($(this).data())
                }),
                ga('default.ec:setAction', 'checkout', {
                  step: 1
                }),
                (t = $(this).data()).via ? (n = t.via, ga('default.send', 'event', 'ec/AjaxCart', 'submit via ' + n)) : ga('default.send', 'event', 'ec/AjaxCart', 'submit')
            })

$(this).data() is

{
  "tracking": "cart_item",
  "productVariant": 955200,
  "productQuantity": 1,
  "productPrice": 15012,
  "productId": 622441,
  "productCategory": 7,
  "productBrand": "pixiv"
}

and it goes without troubles from this. Then it goes on this one.

$('body').on('click', function (e) {
if (!($(e.target).closest('.trigger').length > 0)) return t.removeClass('pulldown-active')
}

and no issue

So this doesn't seem to reproduce on Desktop with RDM and Firefox Android Tablet UA and touch activated.

I wonder what could be at play. Timing issue?

[karlcow]

It sends data to Google Analytics. but nothing different than usual.

I don't have a real tablet under my hand. Do you @wisniewskit

[softvision-sergiulogigan]

Reping @wisniewskit

[wisniewskit]

I'm unable to reproduce. I can click the red カートに入れる button just fine (though I did have to modify the link to end with a 2, as the originally-linked-to product isn't available anymore). It works on my phone as well as my super-slow tablet.

Maybe the problem has since been fixed, @karlcow?

[karlcow]

@masayuki-nakano may be able to confirm. @wisniewskit note that this is not "カートに入れる button" which has an issue, but

Cannot tap "レジに進む"

[karlcow]

And also the button is for me on https://fujimirano.booth.pm/cart?added_to_cart=true&via=market And it is still working on RDM.

[masayuki-nakano]

Oh, yeah, I verified that a lot of buttons are fixed. But "Follow" (written as "フォロー" in Japanese) button is still broken.

[karlcow]

Thanks @masayuki-nakano For the follow button I can't reproduce.

<div class="u-d-flex u-flex-row u-flex-sp-column">
  <div class="js-shop-follow u-ml-400 u-ml-sp-0">
    <a class="btn small follow-action u-w-sp-100" data-product-list="follow" data-tracking="click" rel="nofollow" data-method="post" href="/follow/fujimirano"><i class="icon-plus bigger no-margin"></i>
      <span class="cmd-label">フォロー</span>
    </a>
    <a class="btn small unfollow-action u-w-sp-100" data-product-list="unfollow" data-tracking="click" data-remote="true" rel="nofollow" data-method="delete" href="/follow/fujimirano"><i class="icon-check bigger no-margin"></i>
      <span class="cmd-label">フォロー中</span>
    </a>
  </div>
  <div class="js-fanbox-link u-ml-300 u-ml-sp-0 u-mt-sp-200">
    <a class="btn small fanbox u-w-sp-100 u-d-flex u-align-items-center u-justify-content-center" target="_blank" data-product-list="fanbox" data-pixiv-uid="373731" rel="noopener" href="#">
      <span class="cmd-label">FANBOX開設中</span>
    </a>
  </div>
</div>

The follow button redirects to a sign-in page (on RDM) after going through a tracking of the click. But that seems to be a separate issue than the initial one.

[masayuki-nakano]

I still reproduce same issue with "このショップのレジに進む" button in the cart.

The HTML fragment is:

<a href="https://checkout.booth.pm/checkout/step1?uuid=..." class="btn primary-color mobile-full-length">このショップのレジに進む</a>

And this has:

.btn:active {
    box-shadow: inner 0 1px rgba(0,0,0,0.1);
    position: relative;
    top: 1px;
    box-shadow: none;
    background-color: #24272d;
}

I realized that if this button (anchor) already has active state (setting from WebIDE of desktop), the link always works. So, I investigated each property, then, when I disable position: relative;, the link works as expected. So, this must be bug of Gecko.

However, even I tried to create simple testcase with jsfiddle, I cannot reproduce this...

[masayuki-nakano]

Could be bug 764589?

[masayuki-nakano]

Could be bug 764589?

Ah, perhaps, different. The bug occurs with clicking in the native anonymous sub tree in the <input>.

[karlcow]

@masayuki-nakano I can reproduce https://codepen.io/webcompat/pen/EOgBWJ but it takes two clicks to activate the link in the case with position relative. and only one in the case with no position.

[karlcow]

It's probably worth opening a core bug.

[masayuki-nakano]

Thanks! It's what I'd like to create. Yeah, I'll file a bug.

[karlcow]

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