Toggle Switch behaviour weird and inconsistent with width height changes

Steps to reproduce:
1. Use the attached fxp.
OR
2. Create a simple Flex mobile project and paste the following code into it.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" creationComplete="

{currentState='State1'}

">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
<s:State name="State1"/>
<s:State name="State2"/>
</s:states>
<s:ToggleSwitch id="ts" x.State1="122" y.State1="70" width.State1="524" height.State1="139"
x.State2="122" y.State2="470" width.State2="424" height.State2="149"
fontStyle="normal" selected="true" textDecoration="none"/>
<s:Button x="122" y="269" label="

{currentState}

" click="

{ts.selected = !ts.selected}

"/>
<s:Button x="122" y="369" label="Refresh" click="

{currentState = (currentState == 'State2') ? 'State1' : 'State2'}

"/>
</s:View>

3. Launch the application

Actual Results:
The size and display of the toggle switch are wrong.

Expected Results:
Toggle switch should resize properly.

Workaround (if any):