Pitch Perfect interaction staff is collapsed upon first view

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Navigate to the "Pitch Perfect" exploration (https://www.oppia.org/explore/9)
2. Scroll down to the first interaction
3. Notice the collapsed staff

What is the expected output? What do you see instead?
The expected output is a full staff, able to drag notes on top of. Users during 
testing didn't know what to do in this scenario, since it didn't look like a 
staff, it looked like one bold line.

What operating system are you using?
MacOSX Yosemite, both Chrome and Safari

Please provide any additional information below.

Original issue reported on code.google.com by amylat...@google.com on 13 Jun 2015 at 12:54

Attachments:

• [Screen Shot 2015-06-12 at 5.52.45 PM.png](https://storage.googleapis.com/google-code-attachments/oppia/issue-819/comment-0/Screen Shot 2015-06-12 at 5.52.45 PM.png)

[GoogleCodeExporter]

One other comment, I've found the workaround. As a user, if I zoom in once, I'm 
able to see the full staff, but the page is then at 110%.

Original comment by amylat...@google.com on 13 Jun 2015 at 12:55

[GoogleCodeExporter]

Hey Mike, any chance you could take a look at this?

Thanks!

Original comment by s...@seanlip.org on 13 Jun 2015 at 1:17

[GoogleCodeExporter]

I'll get to work fixing this pronto! Thanks for bringing it up. 

Original comment by wagnerdm...@gmail.com on 13 Jun 2015 at 5:28

[GoogleCodeExporter]

I added length to the init setTimeout so the the parent elements can render 
before the staff is rendered inside. This fixed it for me and I did a good deal 
of browser testing on this to make sure but if you notice anything else please 
let me know. Thanks!

Original comment by wagnerdm...@gmail.com on 19 Jun 2015 at 5:38

• Changed state: Fixed