We have a similar issue.
The result of the analysis based on reproducible observations:
The vertical Position of the touch is not passed correctly to Safari, i.e. if you touch the screen at x/y position 100/200, the Position 100/300 is passed to the browser. This Delta becomes bigger and bigger the more often you touch the Screen. You can observe this best if you have a series of elements in different rows. At the beginning you click on row 1 and row 1 is activated. A bit later you click on row 2 and row 1 is activated, and then row 3, row 4 till you touch the most bottom row, and then the y coordinate passed is even above the 0 position.
Before looking at the user workaround for our site, please note that we have the following event handler for rotation change:
function doOnOrientationChange()
{
switch(window.orientation)
{
case -90:
case 90:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=0.9,width=device-width');
break;
default:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=0.75,width=device-width');
break;
}
}
The Workaround for the user:
- Zoom in and out again. This solves the issue until the page is changed or tab is closed
- Alternatively: change the rotation to Portrait and back
If I add user-scalable=no to the view-port setting, the issue does not appear at all:
function doOnOrientationChange()
{
switch(window.orientation)
{
case -90:
case 90:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=0.9,width=device-width,user-scalable=no');
break;
default:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=0.75,width=device-width,user-scalable=no');
break;
}
}
But this is not a solution for us. Actually we had added this setting after iOS7 was released. It was just a Workaround for a iOS7 bug. Later we found another workaround and we could remove this restriction.
Now after releasing iOS8, I have a Kind of dejavú, since we could add the same setting, this time as a workaround for a bug in iOS8.
But fortunately there is another workaround which works fine for us. Directly after the page is loaded, the following is launched which simulates a zoom out and in by the user:
function ios8BugFixPart1() {
// zoom out
switch(window.orientation)
{
case -90:
case 90:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=0.8,width=device-width');
break;
default:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=0.70,width=device-width');
break;
}
setTimeout(ios8BugFixPart2, 200);
}
function ios8BugFixPart2() {
// zoom in
switch(window.orientation)
{
case -90:
case 90:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=0.9,width=device-width');
break;
default:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=0.75,width=device-width');
break;
}
}
setTimeout(ios8BugFixPart1, 1000);
I hope this will help some of you as well.
PS: is there any possiblity to prevent the Cupertino guys from introducing new OS Versions, even if the changes are so small as it is the case this time?
