Layout issues on m.zappos.com

RESOLVED FIXED

Status

Tech Evangelism
Mobile
RESOLVED FIXED
6 years ago
2 years ago

People

(Reporter: williamr, Assigned: karlcow)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [Engagement][User Engagement][country-all][clientsniff][sitewait] [webkitcss], URL)

Attachments

(4 attachments)

(Reporter)

Description

6 years ago
Created attachment 622412 [details]
screenshot

Web page or screen you were on when you saw the issue: http://m.zappos.com

Steps to reproduce:
1. Go to zappos.com (redirects to m.zappos.com)
2. Look at set of three dropdown boxes below the customer service section

What you expected: Boxes are styled and displayed correctly

Actual results: Graphics and text overlay the dropdown boxes. Looks messy (screenshot attached).
Duplicate of this bug: 757476
Moving to evang.  This happens with the Firefox Desktop using the Mobile User Agent.
Component: General → Evangelism
QA Contact: general → evangelism

Updated

6 years ago
Component: Evangelism → Mobile
OS: Mac OS X → Android
Product: Firefox for Android → Tech Evangelism
Hardware: x86 → ARM
Version: Trunk → unspecified
A number of issues here: 

* They're using an older version of Zepto.js: http://m.zappos.com/tot/js/zepto.20130930102456.js that only includes -webkit- prefixes for animations and transitions.

* http://m.zappos.com/tot/styles/main.p.20130930102548.css contains primarly -webkit- prefixed styles (there are a few moz prefixes in there, very little prefixless CSS3 props). This is why the form elements look so broken, BTW: select, button {-webkit-appearance:none;} + additional webkit styles.

* There's some sniffing to set an android class, but it looks like this class is only used to set a android specific banner image (so probably harmless).

(function () {
if (navigator.userAgent.match(/Android/i)) {
document.body.className = 'android';
} else if (navigator.userAgent.match(/iPhone/i)) {
document.body.className = 'iphone';
}
}());

We need to contact them and ask them to update to the latest Zepto (which is compatible with a lot more non-Webkit mobile browsers) and add -moz- and prefixless styles where appropriate.
Whiteboard: [Engagement][User Engagement] → [Engagement][User Engagement][country-all][clientsniff][contactready]
(Assignee)

Comment 4

5 years ago
contacttwitter
First attempt at contact 
http://twitter.com/MozWebCompat/status/411610532148305920
Assignee: nobody → kdubost
Status: NEW → ASSIGNED
Whiteboard: [Engagement][User Engagement][country-all][clientsniff][contactready] → [Engagement][User Engagement][country-all][clientsniff][sitewait]
(Assignee)

Comment 5

5 years ago
contactemail
ok no answer we need to find something else. 
There is a form which is for customers https://secure-www.zappos.com/contact
So we will likely fail to have a meaningful contact through it.
They also provide the address help@zappos.com. Let's try.
(Assignee)

Comment 6

5 years ago
The user support is replying and said they forwarded the comment to the technical team.
(Assignee)

Comment 7

4 years ago
contactemail
Still no luck. I'm trying again by sending a reminder.
And sending the comment of Mike directly.
(Assignee)

Updated

4 years ago
Whiteboard: [Engagement][User Engagement][country-all][clientsniff][sitewait] → [Engagement][User Engagement][country-all][clientsniff][sitewait] [webkitcss]
To be really precise, the cause of the messy rendering is that these values are thrown away:

 background:
    url(/tot/imgs/globalSP-2@2x.20140828163740.png) no-repeat right -117px,
    -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgb(237,236,234)),
      color-stop(0.2, rgb(255,255,255)),
      color-stop(1, rgb(230,230,228))
    ) !important
  ;
  
  background-size:150px 180px, auto auto;
  
  background-image: 
    url(/tot/imgs/globalSP-2.20140828163740.png) no-repeat right 131px,
    -moz-linear-gradient(
      center bottom,
      rgb(237,236,234) 0%,
      rgb(255,255,255) 30%,
      rgb(230,230,228) 100%
    )
  ;

and the real error is that the WebKit-specific code is given with a "background" property, where the shorthand form is valid - but the CSS property used for the Gecko code is "background-image" where you can't add values like "no-repeat". 

Besides, they should also include a 

-linear-gradient(to bottom, ..)

variant for the final standard.
(Assignee)

Comment 9

3 years ago
Created attachment 8627488 [details]
Capture d’écran 2015-06-30 à 10.57.42.png

This sites still breaks.
I don't thinkthe unprefixing service could fix it, btw. To test.
It makes for an interesting issue.

The rules which which are heavily broken are:

in http://m.zappos.com/tot/styles/main.p.20150602171018.css

``` css
select.std {
  display:block; 
  width:256px; 
  height:34px;
  
  margin:10px auto; 
  padding-left:10px;
  
  font-size:16px; 
  font-weight:bold; 
  color:#2c5987; 
  text-align:center; 
  
  border:1px solid #cecece; 
  -webkit-border-radius:8px;
  
  background:
    url(/tot/imgs/globalSP-2@2x.20150602170929.png) no-repeat right -117px,
    -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgb(237,236,234)),
      color-stop(0.2, rgb(255,255,255)),
      color-stop(1, rgb(230,230,228))
    ) !important
  ;
  
  background-size:150px 180px, auto auto;
  
  background-image: 
    url(/tot/imgs/globalSP-2.20150602170929.png) no-repeat right 131px,
    -moz-linear-gradient(
      center bottom,
      rgb(237,236,234) 0%,
      rgb(255,255,255) 30%,
      rgb(230,230,228) 100%
    )
  ;
}

```

And 

``` css
#search .remove,
.stars,
select.std,
#results .flag span {
   background-color:transparent; 
   background-repeat:no-repeat; 
   background-image:url(/tot/imgs/globalSP-2.20150602170929.png) !important;}
```

oh and there is also the


``` css
/* Retina Background Images */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #header a,
  form.search button {background-image:url(/tot/imgs/globalSP@2x.20150602170929.png) !important; background-size:150px 75px;}

  #search .remove,
  .stars,
  select.std,
  #results .flag span {background-image:url(/tot/imgs/globalSP-2@2x.20150602170929.png) !important; background-size:150px 200px;}
}
```


To note that the background is not shown in WebKit but it is in Gecko.

Adding the screenshot of Gecko compared to Webkit.
Flags: needinfo?(dholbert)
(Assignee)

Comment 10

3 years ago
Created attachment 8627489 [details]
zappos-gecko-blink.jpg

Comparison of Firefox/Gecko and Opera/Blink
(Assignee)

Comment 11

3 years ago
So if I had read more properly Hallvord. 

indeed changing

> background-image: 
>    url(/tot/imgs/globalSP-2.20150602170929.png) no-repeat right 131px,
>     -moz-linear-gradient(
>       center bottom,
>       rgb(237,236,234) 0%,
>       rgb(255,255,255) 30%,
>       rgb(230,230,228) 100%
>     )
>   ;

to 

> background: 
>    url(/tot/imgs/globalSP-2.20150602170929.png) no-repeat right 131px,
>     -moz-linear-gradient(
>       center bottom,
>       rgb(237,236,234) 0%,
>       rgb(255,255,255) 30%,
>       rgb(230,230,228) 100%
>     )
>   ;

fixes the form part.
(Assignee)

Comment 12

3 years ago
The carousel is not working

``` html
<div id="heroImageLayer" style="width: 3200px; transform: translate3d(-630px, 0px, 0px); transition: all 0.3s ease-in-out;">
```

The style information is not being updated.
http://m.zappos.com/tot/js/main.p.20150602170959.js


They are using WebkitTransform



``` js
z.m.Page('index', function (b) {
  var a;
  (function () {
    function c() {
      if (i = document.getElementById('loader')) {
        i.style.WebkitTransform = 'scale(0.5) rotate(' + d + 'deg)';
        if (d == 360) d = 0;
        d += 45
      }
      window.setTimeout(c, 100)
    }
    var g,
    i,
    f,
    d;
    g = document.getElementById('heroImages');
    f = '<div id="loader">';
    for (var e = 1; e < 9; e++) f += '<div class="bar' + e + '"></div>';
    f += '</div>';
    g.innerHTML = f;
    d = 0;
    window.setTimeout(c, 100)
  }) ();
  (function (c) {
    var g,
    i,
    f,
    d;
    g = new z.BaffinModel;
    g.addParam('node', 478);
    g.fetch(function (e) {
      if (e.main_section) {
        e = e.main_section;
        for (var h = 0, j = a = e.length; h < j; h++) e[h].url = z.BaffinUrlBuilder(e[h]);
        i = {
          items: e
        };
        f = document.getElementById('imageGallery').innerHTML;
        d = Mustache.to_html(f, i);
        document.getElementById('heroImages').innerHTML = d;
        c()
      }
    })
  }) (function () {
    var c,
    g;
    b('#heroImageLayer').css({
      width: '3200px'
    });
    c = new z.Pager('#heroImages', '#heroImageLayer', a, 320);
    g = setInterval(function () {
      if (c.currentPage < a) c.pageRight();
       else {
        c.currentPage = 1;
        c.centerPage()
      }
    }, 3000);
    c.onDidRecieveInteraction = function () {
      clearInterval(g)
    }
  });
  z.pixelServer('home').load()
});
```
(Assignee)

Comment 13

3 years ago
Ok noticed that We had a contact with them on webcompat.com
https://webcompat.com/issues/730

Contacted them there
Created attachment 8627508 [details]
screenshot w/ CSS Unprefixing Service

(In reply to Karl Dubost :karlcow from comment #9)
> This sites still breaks.
> I don't thinkthe unprefixing service could fix it, btw. To test.
> It makes for an interesting issue.

Here's what this site looks like, with the CSS Unprefixing Service globally enabled, FWIW. The forms look OK to me, with that change.  The carousel does indeed seem to be broken, though, as you noted later on.

(It sounds like you're already digging in to see what else needs fixing, so I'll clear the needinfo for now; if you have a specific question, please let me know & restore the needinfo.)
Flags: needinfo?(dholbert)

Comment 15

3 years ago
Comment on attachment 8627508 [details]
screenshot w/ CSS Unprefixing Service

We're familiar with the issues but we've been in the middle of a massive migration project, so none of the work anyone does to figure this out is going to get leveraged.

I did my best to argue that we needed to fix these issues, but we'll be scraping all of the code in the next 2 months that you're trying to debug.
(Assignee)

Comment 16

3 years ago
@Chase

Thanks a lot. That is very useful information.
Let's see in the next 2 months. ^_^
(Assignee)

Comment 17

2 years ago
This is "fixed" in Firefox by "layout.css.prefixes.webkit; true"
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.