The slider (carousel) at the top of the page on apple.com/mac doesn't work on Firefox

Created attachment 532735
product slider in fx4.0.1

In today's Aurora and Nightly apple.com/mac doesn't display the products slider at all. Compare the images. It works on Fx 4.0.1 and Chrome, for example.

Created attachment 532736
product slider in Aurora (fx5)

Why do we think this is an evangelism issue exactly?

I believe the "Platform" above should be changed to "All", because I see this issue with 5/19/11 32-Bit Nightly on Windows 7. From what I can see, the Product Slider is not initialized properly. Under Internet Explorer 9, the white triangle slider starts immediately above the "Mac" section and never moves past these four options. When I click the other sections (Applications, Accessories and Server), the white arrow animates and slides over to the next section in Internet Explorer 9. Under Nightly 5/19, the white slider starts at the outer edge of the box and only the images under the "Applications" section can be shown. Clicking on the other sections doesn't do anything. All that occurs is the text changes from inactive (light gray) to active (black) put doesn't retain the focus.

I have narrowed down the regression range to a one month time span:

WORKS (3/18/11 Firefox 4 RC2) = http://hg.mozilla.org/releases/mozilla-2.0/rev/6be9e31d01b4

BROKEN (4/18/11 Nightly) = http://hg.mozilla.org/mozilla-central/rev/84a3ce6c67b1

Regression rage http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=a174b86200d6&tochange=6bcaec19d09e

Which is CSS animations, so its probably about some different in how we implement them, which explains why this is a tech evangelism bug.

*** Bug 660658 has been marked as a duplicate of this bug. ***

dupe, Bug 667650

*** Bug 667650 has been marked as a duplicate of this bug. ***

FF6 and 7 both display the product list, where FF5 still doesn't. CSS animations part are still only -webkit-.

I still don't see the product list in the 2011-06-28 (7.0a1) nightly on Linux.

Either way, if it is not CSS animations then we should narrow down the regression range in comment 5.

Regression window(cached m-c hourly)
Works:
http://hg.mozilla.org/mozilla-central/rev/a174b86200d6
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.2a1pre) Gecko/20110412 Firefox/4.2a1pre ID:20110412030535
Fails:
http://hg.mozilla.org/mozilla-central/rev/b48ebf9695bb
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.2a1pre) Gecko/20110411 Firefox/4.2a1pre ID:20110411232446
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=a174b86200d6&tochange=b48ebf9695bb

They have a strange browserdetect.js file where they check both the mac and windows version info (didn't see any linux specific checks), and the browser type and then do what appears to look like find/replace code for browser prefixes in css.

They also have the productbrowser.js and productbrowser.css (with -webkit-), so Maybe their JS code is dynamically parsing their css? I dunno, maybe someone skilled at reading/debugging the JS/css could figure out what their doing.

The first bad revision is:
changeset: 67975:0a0314bdf5c6
user: L. David Baron <email address hidden>
date: Mon Apr 11 23:18:42 2011 -0700
summary: Implement parsing and computation for the new properties in css3-animation. (Bug 435442, patch 1) r=bzbarsky

They're seem to be detecting -moz-animation stuff, but fail to use it properly.

The slider isn't rendered correctly with Firefox 8.0a1 nightly on Linux either.

@Christian
This seems to affect at least Firefox 6 and 8 and presumably 7, should these be marked as affected as well?

Is it a Core/Style System (CSS) bug or a Tech Evangelism bug?

We need a minimized testcase to be absolutely sure.

This might be Apple's bug in their productbrowser.js.

Brief summary:

- They are detecting whether CSS animation is available (Fx4: false, Fx5: true)
- If unavailable, degraded code is used (<div id="pb-mac"> has pb-degraded)
- If available, CSS transform translate3d() is used, which Gecko doesn't implemented yet

In that case, we'll fail to parse the transform property. Is there something else they're doing that makes things disappear?

In the animation-available code, they fail to set a class "pb-open" to <div id="pb-mac">. The trigger "transitionEnd" doesn't work because productbrowser.css doesn't have -moz-transition property:

> .productbrowser {
> -webkit-transition:opacity .3s;
> -webkit-transition-delay:.2s;
> }

And productbrowser.css has such code:

> .productbrowser.pb-dynamic ul:first-child li a { opacity:0; }
> .productbrowser.pb-open ul:first-child li a { opacity:1; }

So the product browser looks empty.

Thanks! Definitely a Tech Evangelism issue.

You can see the content by manually adding a class "pb-open" to <div id="pb-mac"> with Firebug.

The triangular caret is incorrectly positioned because they try to set its position with translate3d(). The animation-unavailable code (for Fx4) simply sets the left property so it looks good.

I would be willing to take this if someone can point to any documentation on how to approach tech-evangelism bugs? And is there any know person/email where a message could be sent?

<email address hidden>

Ha! Right!! In any case, I've submitted a message to apple through their form to provide feedback on website issues. I described the issue as mentioned in comment 20 and added a link to this bug. Hopefully someone within their team will look into this.

Apple seems to have fixed the issue on the arrival of Lion.
Due to the CDN cache, http://www.apple.com/mac/ still doesn't work
but http://www.apple.com/jp/mac/ looks good to me.

(In reply to comment #28)
> Apple seems to have fixed the issue on the arrival of Lion.
> Due to the CDN cache, http://www.apple.com/mac/ still doesn't work
> but http://www.apple.com/jp/mac/ looks good to me.

I still see the issue with the /jp/mac/ site using the latest Nightly, even after refreshing the page a couple times.

(In reply to comment #29)
> I still see the issue with the /jp/mac/ site using the latest Nightly, even
> after refreshing the page a couple times.

Works with SeaMonkey 2.2 (Gecko 5), but not FF6b2 (Gecko 6).

After many hours and refreshes, this is now working solidly for me (Nightly). Before setting the bug as RESOLVED WORKSFORME, can anyone with FF5/FF6b confirm it works as of now.

Works for me on FF6 beta.

Looks like it works on FF 5,6,7,8 for me as well - windows version.

Tim, do you see the same?

(In reply to comment #31)
> After many hours and refreshes, this is now working solidly for me
> (Nightly). Before setting the bug as RESOLVED WORKSFORME, can anyone with
> FF5/FF6b confirm it works as of now.

The English site (www.apple.com/mac) is now working fine for me using the latest UX build (7/20/11).

HOWEVER, it looks like Apple hasn't updated the code yet for the Japanese site posted in comment 28, as it is not working for me. Don't know how it worked for you, Kohei, but that site (www.apple.com/jp/mac) is still broken for me after a bunch of refreshes.

* Not working properly.
http://hg.mozilla.org/mozilla-central/rev/6df31af4cca6
Mozilla/5.0 (X11; Linux i686; rv:8.0a1) Gecko/20110721 Firefox/8.0a1 ID:20110721030828

* UA spoofing(Firefox version) also does not help.
general.useragent.override;Mozilla/5.0 (X11; Linux i686; rv:8.0a1) Gecko/20110721 Firefox/5.0

* However,UA spoofing(like windows and Firefox version) helps .
general.useragent.override;Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0a1) Gecko/20110721 Firefox/5.0

* I think Apple modification is wrong on Linux at least.

Tested Firefox 4.01 and up under Linux using the User Agent Switcher addon. The images appear and but trying to change to any of the other options (Applications, Accessories, etc) doesn't work. Trying my best with Firebug I got this error when running with a Linux user agent string:

I.u.match(/AppleWebKit\/\d*/i) is null
http://images.apple.com/metrics/scripts/s_code_h.js
 Line 73

And looking at that line:

73 S=S[1].split(/_|\./);I.prop9=S[0]+"."+S[1]+".x";return}var e=I.u.match(/AppleWebKit\/\d*/i).toString().replace(/AppleWebKit\//i,"");
74 if(e>522){I.prop9="10.5.x"}else{if(e>400){I.prop9="10.4.x"}else{if(e>99){I.prop9="10.3.x"
75 }else{if(e>80){I.prop9="10.2.x"}else{I.prop9="mac unknown or non-safari"}}}}}J();

The prototypejs library being used is 1.7, latest stable. If anyone knows more JS than I do (easy) and would like to nail this a bit further before I write again to apple, that would be great.

Apple.com US and HK is now being displayed correctly
Apple.com TW and CN is not working

Maybe they have not yet finished updating the code?
Latest Fx8.0a1
changeset: 73166:19348341366b

Is there still anything outstanding here?

Steve -- still experiencing the behavior that Jose described in comment 36.

Yes, the slider looks alright, but it still doesn't work. When you click on
some other option, the slider should show the items in that option, but
nothing works.

On Sun, Sep 11, 2011 at 12:02 AM, Stevew-u <email address hidden>wrote:

> Is there still anything outstanding here?
>
> --
> You received this bug notification because you are subscribed to the bug
> report.
> https://bugs.launchpad.net/bugs/809155
>
> Title:
> The slider (carousel) at the top of the page on apple.com/mac doesn't
> work on Firefox
>
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/firefox/+bug/809155/+subscriptions
>

The triangular caret (selecting the product categories) doesn't work if...

1. Cookies are disabled

> Error: uncaught exception: [Exception... "Security error"
> code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)"
> location: "http://images.apple.com/metrics/scripts/s_code_h.js Line: 174"]

2. the Linux version of Firefox is used

> Error: I.u.match(/AppleWebKit\/\d*/i) is null
> Source File: http://images.apple.com/metrics/scripts/s_code_h.js
> Line: 71