753426 - Layout issues on m.zappos.com

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[William Reynolds [:williamr]]

Attachment: 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).

Comment 2

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

Moving to evang.  This happens with the Firefox Desktop using the Mobile User Agent.

Comment 3

[Mike Taylor [:miketaylr]]

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.

Comment 4

[Karl Dubost💡 :karlcow]

First attempt at contact 
http://twitter.com/MozWebCompat/status/411610532148305920

Comment 5

[Karl Dubost💡 :karlcow]

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 [e-mail]. Let's try.

Comment 6

[Karl Dubost💡 :karlcow]

The user support is replying and said they forwarded the comment to the technical team.

Comment 7

[Karl Dubost💡 :karlcow]

Still no luck. I'm trying again by sending a reminder.
And sending the comment of Mike directly.

Comment 8

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

To be really precise, the cause of the messy rendering is that these values are thrown away:

 background:
    url(/tot/imgs/[e-mail]) 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.

Comment 9

[Karl Dubost💡 :karlcow]

Attachment: 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/[e-mail]) 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/[e-mail]) !important; background-size:150px 75px;}

  #search .remove,
  .stars,
  select.std,
  #results .flag span {background-image:url(/tot/imgs/[e-mail]) !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.

Comment 10

[Karl Dubost💡 :karlcow]

Attachment: zappos-gecko-blink.jpg

Comparison of Firefox/Gecko and Opera/Blink

Comment 11

[Karl Dubost💡 :karlcow]

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.

Comment 12

[Karl Dubost💡 :karlcow]

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()
});
```

Comment 13

[Karl Dubost💡 :karlcow]

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

Contacted them there

Comment 14

[Daniel Holbert [:dholbert]]

Attachment: 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.)

Comment 15

[Chase Adams]

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.

Comment 16

[Karl Dubost💡 :karlcow]

@Chase

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

Comment 17

[Karl Dubost💡 :karlcow]

This is "fixed" in Firefox by "layout.css.prefixes.webkit; true"