Scaling bugs in HTML5 viewer

Klaus -- I'm encountering scaling issues in the HTML5 viewer. There are significant differences between Flash and HTML5:

The smaller examples have a scale of 0.5 applied to the parent div. Scalechildren is true. Problems:

1) Border width (bgborder) does not scale
2) Border curved corners (bgroundedge) does not scale
3) Textfield text size does not scale

Klaus -- I put up a demo here: Scaling demo

Click "TOGGLE" to toggle scale between 1 and 0.5.

Something else I just noticed. In HTML5 the textfield repositions horizontally with it's left edge as if the textfield had been scaled instead of keeping it actually centered. If I give it an absolute width the field scales properly but not the text.

BTW, my current workaround for scaling the textfield text is to compute the scaled font-size then update the field's CSS with the new size. I wonder if zoom: -moz-transform: would work. Actually I know it works for scaling but am not sure how functionality is affected by the iOS zoom bug.

Another thing I see in this demo: bgroundedge seems to scale correctly but it didn't in my more complete coding. Hmmm.
See update in next message.

XML code:

<krpano>


	See updated code in next message.


</krpano>

Figured it out. bgroundedge scaling works fine for the topmost parent. It doesn't work for children. I have updated the demo to better show this. The updated code is below:

<krpano>


	<preview type="grid(cube,64,64,512,0xCCCCCC,0x777777,0x999999);" />


	<view hlookat="0" vlookat="0" fovtype="VFOV" fov="90" fovmin="30" fovmax="150" limitview="auto" vlookatmin="-90" vlookatmax="+90" />


	<layer name="border1" type="container" align="bottom" y="10" width="250" height="60" bgroundedge="16" bgborder="4 0xffffff" scale="1" scalechildren="true">
		<layer name="border2" type="container" align="bottom" y="6" width="230" height="45" bgroundedge="16" bgborder="4 0xffffff" scalechildren="true">
			<plugin name="toggle" type="container" url="textfield.swf" align="top" y="5" bgcolor="0x999999" bgalpha=".8" bgcapture="true" zorder="2"
				onclick="scaleit()" html="TOGGLE" css="text-align:center; font-size:12px;"  >
			</plugin>
	
			<layer name="border3" type="container" align="bottom" y="7" width="100" height="4" bgcolor="0x000000" bgalpha="1" bgroundedge="4" bgborder="4 0xffffff" zorder="5">
			</layer>
		</layer>
	</layer>
	
	<action name="scaleit" >
		if(layer[border1].scale == "1", set(layer[border1].scale, 0.5), set(layer[border1].scale, 1) );
	</action>


</krpano>

zoom: -moz-transform: is suppose to handle scaling of children in HTML5 and for the most part it does pretty well. Unfortunately there is a bug regarding finding mouse X/Y positioning that is causing me headaches. It works fine in FF but not Safari or Chrome. I thought it was only in iOS but found this to be true on desktops as well.