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

Bug #809155 reported by KushalSharma on 2011-07-12
16
This bug affects 3 people
Affects Status Importance Assigned to Milestone
Mozilla Firefox
Fix Released
Medium
firefox (Ubuntu)
Medium
Unassigned

Bug Description

This worked well in Firefox 4. It works well in the latest version of Chromium. It looks alright in Opera Next, but doesn't seem to work though. In FF (the stable as well as the Aurora channel updates), however, the slider looks completely weird as you can see if you go to that page (also in the attached screenshot).

Perhaps this is an issue with web standards compliance on Apple's part, but if a website as popular as that one doesn't look right, I suppose it might be a problem for the users of FF. Therefore, I thought it might be worth highlighting it. I did highlight this in the feedback form when I was using 5.0 alpha versions too, but looks like it somehow got overlooked.

ProblemType: Bug
DistroRelease: Ubuntu 11.04
Package: firefox 5.0+build1+nobinonly-0ubuntu0.11.04.2
ProcVersionSignature: Ubuntu 2.6.38-8.42-generic 2.6.38.2
Uname: Linux 2.6.38-8-generic i686
Architecture: i386
Date: Tue Jul 12 11:41:45 2011
FirefoxPackages:
 firefox 5.0+build1+nobinonly-0ubuntu0.11.04.2
 flashplugin-installer 10.3.181.34ubuntu0.11.04.1
 adobe-flashplugin N/A
 icedtea-plugin 1.1~20110420-0ubuntu1.1
InstallationMedia: Ubuntu 11.04 "Natty Narwhal" - Release i386 (20110427.1)
ProcEnviron:
 LANGUAGE=en_US:en
 LANG=en_US.UTF-8
 SHELL=/bin/bash
SourcePackage: firefox
UpgradeStatus: No upgrade log present (probably fresh install)

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

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. ***

*** 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.

KushalSharma (kushalsharma83) wrote :
Robert Roth (evfool) wrote :

I can confirm this on Firefox 8.0a1 and 5.0, the slider does not contain any images (although the links are present, as hovering over reveals the url in the statusbar), and switching between the sections does not work (Mac, Applications, Accessories, Server sections on the bottom of the slider). All these work on Chromium.
---
Ubuntu Bug Squad volunteer triager
http://wiki.ubuntu.com/BugSquad

Changed in firefox (Ubuntu):
status: New → Confirmed

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

Robert Roth (evfool) wrote :

This is already known upstream, added the bug tracking for https://bugzilla.mozilla.org/show_bug.cgi?id=657469.

Changed in firefox:
importance: Unknown → Medium
status: Unknown → Confirmed
Micah Gersten (micahg) wrote :

Setting this to Triaged as we have an upstream bug. Please report any other issues you may find.

Changed in firefox (Ubuntu):
importance: Undecided → Medium
status: Confirmed → Triaged
Micah Gersten (micahg) wrote :

Created tasks as this is a regression introduced in the security update.

Changed in firefox (Ubuntu Natty):
importance: Undecided → Medium
status: New → Triaged
tags: added: regression-update

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

Micah Gersten (micahg) on 2011-07-12
tags: added: regression-release

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
>

Chris Coulson (chrisccoulson) wrote :

Why are we tracking this bug in Launchpad when it's not even a Firefox bug? Even the upstream bug isn't reported against Firefox

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

Micah Gersten (micahg) wrote :

I was tracking it since it's a perceived regression in Firefox. The fault is bad code on the site, but it looks like it fails due to the upgrade.

Adolfo Jayme (fitojb) on 2013-02-26
no longer affects: firefox (Ubuntu Natty)
Adolfo Jayme (fitojb) on 2013-06-27
Changed in firefox (Ubuntu Oneiric):
status: Triaged → Won't Fix
no longer affects: firefox (Ubuntu Oneiric)
Changed in firefox:
status: Confirmed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.