s-yadav/patternLock

Not working with CSS3 zoom, the touch is not detected right

sakr1 opened this issue · 2 comments

sakr1 commented

Thanks for the great script, I noticed lately that it cannot be used along with CSS3 zoom, if for example, you set zoom:75% under the body css block, the pattern is zoomed, but the touch in not detected right, you need to draw the line on other parts of the screen so they show on the pattern.

Thanks!

yes, there is some issue on getting pageX and pageY on different zoomed value, I will check for any alternative to get proper coordinates.

sakr1 commented

hi, thanks for your reply, i have worked on a hack for it for now, it works on chrome/safari/firefox but not on ie yet.

we get the zoom from body css like this (body id set to "mainBody"):

var zoom = 1;
if ($("#mainBody").css("zoom").indexOf('%') == -1) {
    zoom = parseFloat($("#mainBody").css("zoom"));
} else {
    zoom = parseFloat($("#mainBody").css("zoom")) / 100;
}  

then apply those to the to of the getIdxFromPoint function:

getIdxFromPoint: function (x, y) {
x = x / zoom;
y = y / zoom;

thanks!