October 22, 2010

Android browser bug: -webkit-transform scaling discrepency

[UPDATE]: this only happens on my HTC Incredible device, but not my Samsung Galaxy S device. yeesh.

I'm porting an HTML5 app we built for the iPad over to Android for the upcoming Samsung tablet. With the small difference in aspect ratio, I'm scaling down the entire site to avoid rebuilding everything. It turns out, that if you scale a container with CSS like so:
-webkit-transform-origin: 0 0;
-webkit-transform : scale(0.78125);
That works fine. However, I wanted to scale it dynamically with javascript, based on the device size, like so:
var globalScale = window.innerWidth / 768;
element.style.webkitTransformOrigin = '0 0';
element.style.webkitTransform = 'scale(' + globalScale + ')';
The result looks the same, but now clicking on anything in the scaled container is completely broken. :(

1 comment:

  1. the same here. the Android browser bug: -webkit-transform scaling discrepency...