www.lcbo.com - Table with locations is not showing

[ksy36]

URL: https://www.lcbo.com/webapp/wcs/stores/servlet/PhysicalStoreInventoryView?langId=-1&storeId=10203&catalogId=10051&productId=54875

Browser / Version: Firefox 90.0
Operating System: Mac OS X 10.14
Tested Another Browser: Yes Chrome

Problem type: Something else
Description: Can't see the location availability table
Steps to Reproduce:
The table with locations is not showing, works in Chrome

View the screenshot

Browser Configuration

• gfx.webrender.all: true
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20210526094846
• channel: nightly
• hasTouchScreen: false
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[ksy36]

The table is on the page, but it's shifted to the right of the parent block:

The issue is caused by the mix of negative margins and a float (and the float is not cleared):

.col-xs-12 {
    float: left;
}
...

.row {
    margin-left: -5px;
    margin-right: -5px;
}

Which is https://bugzilla.mozilla.org/show_bug.cgi?id=1400958

The site could fix this by adding clear:both between <div class="col-xs-12"></div> and <div class="row scrollX"></div> elements.

We could also add an intervention:

.physicalStoreInventoryPage .scrollX {
  clear: both;
}	

Lets close as a duplicate

[ksy36]

Sorry @denschub just realized it was assigned to you. I guess I really wanted that Chambord Royale :D

[denschub]

just realized it was assigned to you. I guess I really wanted that Chambord Royale :D

I mean... I'm not gonna complain about have less issues on my plate. :)

I removed the needssitepatch label earlier, but Ksenia veto'ed correctly. Site patch is slotted for v24 and is tracked in https://bugzilla.mozilla.org/show_bug.cgi?id=1719870

Let's reopen this and move this to needscontact - even though this is a core bug, the intervention is simple enough that it could also be applied by the site's devs.

[webcompat-bot]

Generate outreach template

[dholbert]

As noted on https://bugzilla.mozilla.org/show_bug.cgi?id=1400958 , I think this (like other recent webcompat associations there) is actually a case of the site depending on a Chrome/WebKit bug. Specifically:
https://bugs.chromium.org/p/chromium/issues/detail?id=1141209
https://bugs.webkit.org/show_bug.cgi?id=233956

[softvision-oana-arbuzov]

@ksy36 the Intervention works fine on desktop.

I've checked on mobile layout and the locations table does not load regardless if the Intervention is enabled or not. The locations table loads in Chrome.

Can we have the Intervention for mobile layout also?

Tested with:
Browser / Version: Firefox Nightly 97.0a1 (🦎 97.0a1-20211221093038)
Operating System: Windows 10 Pro, 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)

[ksy36]

Thanks @softvision-oana-arbuzov , I've filed https://bugzilla.mozilla.org/show_bug.cgi?id=1747438 ad will add it in the next rotation

[dholbert]

Good news: I think this isn't reproducible anymore, and we can remove the intervention.

I'm revisiting this after landing a fix in https://bugzilla.mozilla.org/show_bug.cgi?id=1745310 (which should make us produce the same layout as Chrome here, in Firefox 102 and newer). But I think the site's design has changed such that this is no longer reproducible.

I disabled the intervention and browsed around in Firefox 100 release (in desktop as well as RDM), and I observed:

• The original URL just redirects to https://www.lcbo.com/ now.
• If I view a particular product e.g. https://www.lcbo.com/en/downton-abbey-gin-22891 , the site doesn't automatically show a store-availability chart like it did (or tried to do) in the original screenshots here.
• If I click through to store availability, everything looks fine (and the design looks different)
• Also, the bar of links at the top of the page has changed since the comment with a screenshot above -- at that point it had WINE SPIRITS BEER&CIDER ... whereas now it has Products New Arrivals Gifts .... So, this is a further indication that the site has undergone a redesign.

If anyone can still reproduce the issues here (with the intervention disabled), please say so (and then we can also confirm whether bug 1745310's patch helped or not).

[ksy36]

A new url for the table would be https://www.lcbo.com/en/storeinventory/?sku=111443 and indeed the design is different. Let's remove the intervention and close this :)