Bug 86656 - app display state doesn't update
Summary: app display state doesn't update
Status: UNCONFIRMED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL: http://letmespellitoutforyou.com/t/_b...
Keywords:
Depends on:
Blocks:
 
Reported: 2012-05-16 10:59 PDT by Mike Sierra
Modified: 2012-05-17 04:09 PDT (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Mike Sierra 2012-05-16 10:59:16 PDT
Steps:

1) Go to URL: http://letmespellitoutforyou.com/t/_bgAudio.htm

(This is a demo HTML5 audio playlist UI that autoplays song)

2) Tap any of the blue bars below the audio element. Observe.

3) Open Web Inspector. Observe.

4) Reload page.

5) Again, tap any of the blue bars. Observe.

6) Close Web Inspector.

7) Reload page.

8) Again, tap any of the blue bars. Observe.

Observe that at #3 & #5, the app's UI changes in various ways triggered by CSS class. Expected behavior: app should display new UI at step #2, and should not suddenly display the UI when running Web Inspector.  Note the subsequent steps establish that if Inspector is open, app behaves correctly, otherwise not.

This summarizes what happens when UI state changes:
* audio element is hidden ("controls" attr is toggled off)
* new mp3 loads & plays
* volume slider & album cover display
* selected song uses CSS marquee-scrolling animation 
* song's playback progress reflects as green within bar, implemented as <progress> element.
* audio's "timeupdate" listener updates progress's value attr.

Was able to get similar behavior on Mobile Chrome Beta under Ice Cream Sandwich.  However, in that case, substitute this step for #3:

3) Rotate orientation from portrait to landscape. 

Again, app UI doesn't change at #2, but rather at #3, but this time as a result of orientation change.

Tried creating various "progress" reductions here to isolate various combinations, but with no luck:
  http://letmespellitoutforyou.com/t/

All work by tapping progress elements:
_progress1: modifies width of element via CSS
_progress2: styles progress bar using -webkit-appearance:none & ::-webkit-progress-* pseudo elements.
_progress3: toggles audio controls attr
_progress4: same, but toggle hidden attr & applied autoplay attr
_progress5: Example w/2 progress bars
_progress6: Same, but incorporates marquee animation