Closed Bug 1106810 Opened 9 years ago Closed 8 years ago

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

Categories

(Web Compatibility :: Site Reports, defect)

ARM
Other
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: nsm, Unassigned)

References

()

Details

(Whiteboard: [contactready] [css] [country-us])

Attachments

(5 files)

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.
Component: General → Mobile
Product: Firefox for Android → Tech Evangelism
Version: Firefox 34 → Trunk
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..
(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..
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..
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?
Flags: needinfo?(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.)
Flags: needinfo?(dholbert)
Yes, let's contact them to recommend a workaround. I think the one in comment 7 is sensible and probably risk-free.
See Also: → 1073574
Whiteboard: [contactready] [css] [country-us]
fixed
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
Component: Mobile → Site Reports
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: