Closed Bug 853580 Opened 11 years ago Closed 11 years ago

Playlist scrolling broken on html5.grooveshark.com

Categories

(Tech Evangelism Graveyard :: English US, defect)

defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: dontarius, Unassigned)

References

()

Details

(Keywords: reproducible, testcase-wanted)

User Agent: Mozilla/5.0 (Windows NT 6.0; rv:19.0) Gecko/20100101 Firefox/19.0
Build ID: 20130307023931

Steps to reproduce:

1) go to html5.grooveshark.com
2) click on three horizontal bars in upper left corner to open menu
3) click on "popular"
4) click on "play"
5) open the playlist by clicking the current song in the dark bar at the bottom of the screen
6) scroll down through the playlist


Actual results:

The playlist disappears.  It does not appear to be possible to view more then ~50 songs in the playlist.


Expected results:

The playlist should not disappear.  I should be able to scroll through the entire playlist.

I tested on Chrome for Android to confirm that it works properly in Chrome.
I also see this problem on desktop Firefox. When the playlist 'greys' out and I continue to mouse-scroll up and down, I see my console flood with

[16:17:03.100] Error in parsing value for 'height'.  Declaration dropped. @ http://html5.grooveshark.com/#!/queue

I also see possible Webkit targeted styling errors:

[16:16:30.598] Error in parsing value for 'background-image'.  Declaration dropped. @ http://html5.grooveshark.com/build/app.min.css?1363635037:1
[16:16:30.598] Expected color but found 'top'.  Error in parsing value for 'background-image'.  Declaration dropped. @ http://html5.grooveshark.com/build/app.min.css?1363635037:1
[16:16:30.598] Unknown property 'box-sizing'.  Declaration dropped. @ http://html5.grooveshark.com/build/app.min.css?1363635037:1
[16:16:30.599] Unknown pseudo-class or pseudo-element '-webkit-search-cancel-button'.  Ruleset ignored due to bad selector. @ http://html5.grooveshark.com/build/app.min.css?1363635037:1
[16:16:30.599] Unknown property 'box-orient'.  Declaration dropped. @ http://html5.grooveshark.com/build/app.min.css?1363635037:1
[16:16:30.599] Unknown property 'box-pack'.  Declaration dropped. @ http://html5.grooveshark.com/build/app.min.css?1363635037:1
[16:16:30.599] Unknown property 'box-align'.  Declaration dropped. @ http://html5.grooveshark.com/build/app.min.css?1363635037:1
[16:16:30.599] Error in parsing value for 'display'.  Declaration dropped. @ http://html5.grooveshark.com/build/app.min.css?1363635037:1
[16:16:30.599] Unknown property 'text-overlow'.  Declaration dropped. @ http://html5.grooveshark.com/build/app.min.css?1363635037:1
--
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Windows Vista → Android
Hardware: x86 → ARM
This bug will need someone to look at the offending possible error and determine if it's an issue in Gecko or something on their end.

Please move to right component.
Component: Graphics, Panning and Zooming → Layout
Product: Firefox for Android → Core
The site dose not work in Firefox3.6 - Nightly22.0a1 Desktop, Opera12.14 Desktop and IE9 Desktop.

I think that the site did not support Firefox(all version), Opera12.14 and IE9 Desktop as well.
At step 5. when the play list is first loaded, inspecting the element that
contains the list of songs is:

<ul class="list song-list queue-song-list" style="position: relative; padding-top: 0px; height: 29500px;">

after scrolling down until the list disappears:

<ul class="list song-list queue-song-list" style="height: 29500px; position: relative; padding-top: 811132px;">

Clearly some sort of error on the site...
Assignee: nobody → english-us
Component: Layout → English US
OS: Android → All
Product: Core → Tech Evangelism
Hardware: ARM → All
I've emailed them a bug report regarding this issue; we'll see what happens.
Grooveshark dev here. The fix for the issue just went live.

We're now using document.documentElement.scrollHeight instead of document.body.scrollHeight. It seems that Webkit-based browsers return the correct scrollHeight for body, but not documentElement and FF/IE return the correct height for documentElement but not body. This is an odd situation because the scrolling div is position absolute but it is still taking up space on the page.

Unless you think this is a bug in FF, this bug should be closed.
James, is the page in standards or quirks mode?  The spec at http://dev.w3.org/csswg/cssom-view/#dom-element-scrollheight has:

  If the element is the root element and the Document is not in quirks mode return
  max(viewport scrolling area height, viewport height).

  If the element is the HTML body element and the Document is in quirks mode return
  max(viewport scrolling area height, viewport height).

  Return the height of the element's scrolling area.

It sounds like your code expects the "max(viewport scrolling area height, viewport height)" behavior, right?
Yes, our page is in standards mode and yes, we expect the "max(viewport scrolling area height, viewport height)". It seems that in Webkit, document.body.scrollHeight returns the viewport scrolling area and the documentElement returns just the viewport height.

Nonetheless, we actually used:
Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)
James, thanks, and thank you for the change on your end!

Resolving fixed, per comment 6.
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Tech Evangelism Graveyard
You need to log in before you can comment on or make changes to this bug.