Button template's styleClass not working

Question

We have created our own button template in UIX, which specifies a default style and JavaScript mouse events so that the button visually changes when the user hovers the mouse over it.
This works, except that on startup, the default class that we assign to the button isn't there in the generated HTML.
The onMouseOut/onMouseOver events do work however, so we get the weird situation that our buttons look all wrong, but they look correct once the user has moved the mouse over them at least once.
Does anyone have any idea? Here's our UIT file:
<templateDefinition xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:data="http://xmlns.oracle.com/uix/ui"
xmlns:ui="http://xmlns.oracle.com/uix/ui"
xmlns:html="http://www.w3.org/TR/REC-html40"
expressionLanguage="el"
targetNamespace="http://xmlns.psb.nl/osiris/templates"
localName="button">
<type base="ui:button">
<attribute name="text" javaType="string"/>
</type>
<content>
<button styleClass="UnselectedButton"
onMouseOut="this.className='UnselectedButton';"
onMouseOver="this.className='SelectedButton';">
<attributeMap>
<rootAttributeMap/>
</attributeMap>
<childMap>
<rootChildMap/>
</childMap>
</button>
</content>
</templateDefinition>

Answer 1

From daniel.early79 at this thread: https://discussions.apple.com/thread/4894152?start=6&tstart=6
I just experienced the same issue of my down volume button not working but the up volume button does. I messed around with the phone for a bit. I just found out that if I hold the iPhone in my right hand with my thumb on the upper right corner of the phone and apply slight pressure on the upper right corner, the down volume button worked. After doing this a couple times it started working normally again. Must be a design issue. Hope this helps!