Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

m.gamestop.com - Gradients and colors are missing #248

Closed
le717 opened this issue Aug 4, 2014 · 14 comments
Closed

m.gamestop.com - Gradients and colors are missing #248

le717 opened this issue Aug 4, 2014 · 14 comments

Comments

@le717
Copy link

le717 commented Aug 4, 2014

URL: http://m.gamestop.com
Browser / Version: Firefox 31.0
Operating System: Android 4.1.2
Problem type: Looks like the website has a bug.
Site owner: No

Steps to Reproduce

  1. Navigate to: http://m.gamestop.com
  2. Tap very small link on "WebKit required" page if necessary
  3. Compare same page as loaded in Chrome 36 Mobile

Expected Behavior: Red gradients in navigation bar, white, gray, and black gradients in page body, rounded edges on multiple elements, search bar in the proper place
Actual Behavior: All gradients are missing, instead uses fall back colors that do not always match the gradient colors (primarily in the navigation bar), no buttons are rounded at all, search bar is in the wrong position (the View Cart button is also in the wrong location, but that is broken in both browsers).

@le717
Copy link
Author

le717 commented Aug 4, 2014

I first discovered this around 6 months ago and AFAIK there has been no change since. I think it may be safe to say these incompatibilities have been around for a long time now.

@miketaylr
Copy link
Member

Sigh.

  1. Tap very small link on "WebKit required" page if necessary
HTTP/1.1 302 Moved Temporarily
Cache-Control: private
Content-Length: 143
Content-Type: text/html; charset=utf-8
Location: /Home/NoWebKit?returnUrl=/
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
COMMERCE-SERVER-SOFTWARE: Microsoft Commerce Server, Enterprise Edition
X-Powered-By: ASP.NET
Date: Mon, 04 Aug 2014 19:36:40 GMT
Connection: keep-alive
Set-Cookie: WebkitCheck=; path=/
Set-Cookie: akamai-cookie=701109420.20480.0000; path=/

<html><head><title>Object moved</title></head><body>
<h2>Object moved to <a href="/Home/NoWebKit?returnUrl=/">here</a>.</h2>
</body></html>

Getting past that, and looking at http://m.gamestop.com/Content/Css?name=gamestop_mobile, it's clear that the developers only added -webkit- prefixes to CSS props like box-shadow, linear-gradients, and border-radius. They're not even using anything complicated like Flexbox.

We should reach out to them and ask them to add non-prefixed properties after the webkit prefixed ones. And invite them to join the year 2014 by removing their /NoWebKit redirect.

@miketaylr miketaylr added ie and removed ie labels Aug 4, 2014
@le717
Copy link
Author

le717 commented Aug 4, 2014

There's a bit more than that present, though those properties are the main offenders. I quickly parsed the CSS to generate a list of all WebKit prefixed properties. Perhaps it can help during contact.

https://gist.github.com/le717/4ce7042ddb0e7845ada8

You are right, this is nothing complicated in this code. The worst will be updating to the final linear-gradient syntax, and even that is not hard. For as simple these CSS edits would be, it seems like the same amount of time spend adding that redirect page would have been equal to the time it would have took to add the standard properties.

@magsout
Copy link
Member

magsout commented Aug 11, 2014

I just sent a message on twitter.

@le717
Copy link
Author

le717 commented Aug 17, 2014

@magsout Can you provide a link to the tweet please?

@magsout
Copy link
Member

magsout commented Aug 17, 2014

@le717
Copy link
Author

le717 commented Feb 4, 2015

I actually just checked this the other day, and it is still present and been made a tad worse. While the site CSS has not changed much (via visual inspection), they have changed the landing page a bit.

m-gamestop-site

Yup.

@miketaylr
Copy link
Member

Setting the needscontact label--it seems their twitter account doesn't want to respond. 😢

I wonder if @btknorr still works at GameStop and can help? I see GameStop has an org here on GitHub but it hasn't had much activity lately: https://github.com/GameStop/crossroads.js

@karlcow
Copy link
Member

karlcow commented Feb 5, 2015

@miketaylr
Copy link
Member

Still an issue (was reported at https://bugzilla.mozilla.org/show_bug.cgi?id=1147488). :(

@karlcow
Copy link
Member

karlcow commented Jul 29, 2015

They do have a github account but which doesn't seem to be used @GameStopInternational
When faking the UA to be Chrome Mobile we get a mainly working Web sites.

The CSS woudl be easy to fix with http://hallvord.com/temp/moz/cssfixme.php
Nothing fancy.
sent an email at feedback@gamestop.com

@karlcow
Copy link
Member

karlcow commented Jul 29, 2015

AUTO-REPLY: [webc-248] UA sniffing and prefixes. (#2697-489824087-7778)

@le717
Copy link
Author

le717 commented Sep 11, 2015

It would appear this is no longer an issue! The mobile GameStop site has been redesigned, removing the redirect page, and they've added standardized properties (in addition to -moz-, -ms-, and -webkit- versions). I still see a few small things that work only in Chrome mobile, but I'm going to chalk them up as minor, non-impact cross-browser incompatibilities. :)

I'll leave closing this issue to whoever in case other things need to be done when an issue is (finally) resolved.

@miketaylr
Copy link
Member

Awesome, thanks for following up @le717!

@karlcow karlcow added this to the fixed milestone Oct 30, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants