1106810 - backcountry.com homepage and search results main content is not displayed

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Nikhil Marathe [:nsm] (No longer reading bugmail, please needinfo?)]

http://backcountry.com is a well known outdoor sports retailer.
The main content (homepage screens) do not show up, just a white background. Similarly searching for products leads to search results leads to nothing. Headers and footers render.

Comment 1

[Nikhil Marathe [:nsm] (No longer reading bugmail, please needinfo?)]

Attachment: homepage in firefox

Comment 2

[Nikhil Marathe [:nsm] (No longer reading bugmail, please needinfo?)]

Attachment: homepage in chrome

Comment 3

[Nikhil Marathe [:nsm] (No longer reading bugmail, please needinfo?)]

Attachment: search in firefox

Comment 4

[Nikhil Marathe [:nsm] (No longer reading bugmail, please needinfo?)]

Attachment: search in chrome

Comment 5

[Hallvord R. M. Steen [:hallvors]]

The oddest thing is that if you open dev tools, find the <div class="body"> element and de-activate the "overflow:hidden" property inside the @media(max-width: 64em){} block, the page contents will appear..

Comment 6

[Hallvord R. M. Steen [:hallvors]]

(even though the "box model" tab for the div.body element confirms it's got reasonable dimensions, I see no obvious reason why the overflow:hidden should hide all the content inside it)

Even with the overflow:hidden removed, it doesn't render perfectly - now the main header and search field disappears..

Comment 7

[Hallvord R. M. Steen [:hallvors]]

A possible workaround is finding the block

@media (max-width:64em){
.head-mobile{
  display:inline-block;
  vertical-align: middle;
}
}

and adding 

float:none

to those .head-mobile rules. I have no idea yet why this would solve the problem and whether it works for different resolutions..

Comment 8

[Hallvord R. M. Steen [:hallvors]]

Attachment: 1106810.htm - demo (use Responsive Design View - ctrl-shift-M - with a narrow viewport to see the problem)

This reminds me of bug 1073574. An element has float:left and width:100%. The next element also has width:100% but ends up being rendered to the right of the previous one, off-screen and hidden because of an overflow:hidden rule.

Daniel, is this a duplicate?

Comment 9

[Daniel Holbert [:dholbert]]

Looks like it, yeah. At least, the workarounds described there in testcase 3 do also work on your testcase here. (those workarounds being: add a border, or set "overflow" on the parent of the floated element.  In this case, that parent is the div with class="page ui-offcanvas-main".)

So, this should probably be marked as a dupe, though if you think we should ask the site to implement a workaround, we could leave this open as a Tech Evang bug.

(Unfortunately I don't know our float-handling code particularly well (I have the impression that it's somewhat fragile), so I don't know how hard bug 1073574 is to fix.  It's useful to know that it's being hit by multiple real-world sites, though.)

Comment 10

[Hallvord R. M. Steen [:hallvors]]

Yes, let's contact them to recommend a workaround. I think the one in comment 7 is sensible and probably risk-free.

Comment 11

[Karl Dubost💡 :karlcow]

fixed