755800 - Etsy homepage image slider unswipeable due to WebKit-only code (CSS and DOM)

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Carmen]

Web page or screen you were on when you saw the issue: 

Firefox for Mobile Beta build
Samsung Galaxy Nexus

Steps to reproduce:
1. etsy.com (which takes me to their mobile site.)
2. Page renders, but not within the frame of the phone screen. Some of the images are cut off on the right side, and I'm unable to scroll to see them. 


What you expected: 

Crash report ID (if applicable):

Comment 1

[Kartikaya Gupta (email:[e-mail])]

Can you post a screenshot of what you're seeing? The page seems to render fine for me, except for the search button, where the text leaks out.

Comment 2

[Kartikaya Gupta (email:[e-mail])]

Attachment: etsy screenshot

This is what I see when I load etsy.com on a Galaxy Nexus using the Firefox Beta build.

Comment 3

[Carmen]

I can keep trying. It is most noticeable when an image has text in it - and you can see the text cut off. These images rotate, so right now, it's not obvious.

Comment 4

[Carmen]

Attachment: screenshot

Comment 5

[Carmen]

Just attached a screenshot from this a.m. You can see that the image of the heart is cut off. Not as obvious as when there is a photo with words that are chopped, but you get the idea. (Fits on screen in the iPhone)

Comment 6

[Kartikaya Gupta (email:[e-mail])]

This is a problem with the site's layout. They lay out the page so that each row has a pair of images. The smaller of the two is set to 0.38125 of the window.innerWidth, and the larger is 0.61875 of the window.innerWidth. This leaves no room for the various margins on the elements, causing the images to stick out a couple of pixels on the right side of the screen.

Comment 7

[Mike Brittain]

We (Etsy) haven't spent a lot of time validating support on Firefox Mobile or FirefoxOS, but are starting to work some of those issues out now.

Please feel free to use me as a contact point. Mike Brittain <[e-mail]>

Comment 8

[Mike Brittain]

Attachment: Screenshot_2013-07-19-20-04-38.png

Attached screenshot shows Etsy.com in Firefox on Galaxy S3.

The page layout is correct, with exception of the "search" button bleeding slightly.

The images in the "handpicked items" area are *supposed* to bleed off the screen. Unfortunately, they are not swipeable in Firefox. We'll (Etsy) need to look into that.

Comment 9

[Mike Taylor [:miketaylr]]

The search button bleeding has been fixed. :)

Will spend a bit of time looking at the non-swiping images right now.

Comment 10

[Mike Taylor [:miketaylr]]

Attachment: 2013-10-15 21.34.26.png

Comment 11

[Mike Taylor [:miketaylr]]

The listing-swipe content (the "Handpicked Items") is unswipe-able for a number of reason:

[17:12:24.101] ReferenceError: WebKitCSSMatrix is not defined @ http://site.etsystatic.com/assets/dist/js/mobile/index.20131009194800.js:1

y = new WebKitCSSMatrix(t.css("-webkit-transform")) being the culprit. The CSSMatrix constructor was removed from the CSS Transforms spec, so this will likely never be implemented in Firefox.

There's lots of -webkit-transform properties set by the e.Mobile.Scrollable class so we'll obviously fail there.

In index.css and base.css, again, just -webkit- prefixes for styles and media queries, e.g., @media only screen and (-webkit-min-device-pixel-ratio :2)

Given that we're served a different "base-webkit.js" it's clear that Etsy's mobile site is designed for mobile Webkit browsers. But Firefox for Android supports everything needed to make it work, given a little cross-browser love.

Comment 12

[Mike Taylor [:miketaylr]]

Updating title and setting to sitewait as Mike Brittain is already on this ticket.

Comment 13

[Karl Dubost💡 :karlcow]

So that's interesting. 
Checking today, there is a mosaic of images on the homepage, I click on one and get the image bigger with details on top and a cross to close the image. But the cross is not working at all. 

Swiping is still not working.


btw, fwiw, our friends at Opera do not receive the mobile site but the desktop site on Opera Mobile Presto.
UC Web is working well. the swiping too.

Comment 14

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

Confirming the "can't close" problem Karl mentioned, in addition I note that it's really only possible to open the top left image - touching any other just causes the top left to open.

Comment 15

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

I think this issue is gone - as far as I can tell I can now click through to the right item and swipe anything that's meant to be swipeable.
Thanks and <3 to Etsy - I'm even a customer now :)