滚动后IOS8 Safari网站链接不起作用

Question

我有一个主要为iPhone用户构建的带有Bootstrap主题的Angular网站，自IOS8更新以来，我发现了与滚动相关的问题。该网站表现良好，直到我滚动，一旦我滚动链接表现不正常，例如，如果我按下按钮2，按钮1的链接将打开。还有一些CSS3样式不起作用，例如:nth-child(even)我搜索了几天试图找到这种行为和滚动错误之间的链接，但我无法在任何地方找到修复。不幸的是我不能发布网站链接，但它包含一个固定的页眉和页脚，以及设置为overflow: auto;的div。非常感谢任何帮助：）

注意：我在可滚动元素中使用多个手风琴

可滚动元素的样式

    .scrollable {
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      position: absolute;
      top: 47px;
      bottom: 0px;
      left: 0px;
      right: 0px;
    }

更新：我在IOS模拟器中添加了一张图片来说明问题。我使用Inspect Element在滚动后突出显示Anchor标签的位置。就像Safari在滚动后不会重置位置一样。

更新：我认为这个问题与使用position: fixed;定位的页脚有关我还没有能够确认这个但它看起来像是根本问题。

Answer 1

我们有类似的问题。 基于可重复观察的分析结果： 触摸的垂直位置未正确传递到Safari，即如果您在x / y位置100/200处触摸屏幕，则位置100/300将传递到浏览器。触摸屏幕的频率越高，此Delta越大越大。如果您在不同的行中有一系列元素，则可以观察到这一点。在开始时，单击第1行，激活第1行。稍后你点击第2行，第1行被激活，然后第3行，第4行，直到你触摸最底部的行，然后传递的y坐标甚至高于0位置。  在查看我们网站的用户解决方法之前，请注意我们有以下用于轮换的事件处理程序：

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; 
  }
}

用户的解决方法：

• 再次放大和缩小。这解决了问题，直到页面被更改或标签关闭
• 或者：将旋转更改为纵向并返回

如果我将 user-scalable = no 添加到视口设置，则根本不会出现此问题：

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; 
  }
}

但这不是我们的解决方案。实际上我们在iOS7发布后添加了这个设置。这只是一个iOS7错误的解决方法。后来我们发现了另一种解决方法，我们可以删除此限制。 在发布iOS8之后，我有一种dejavú，因为我们可以添加相同的设置，这次是作为iOS8中的错误的解决方法。 但幸运的是，还有另一种解决方法对我们来说很好。在加载页面之后，将立即启动以下模拟用户缩小和输入的内容：

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);

我希望这对你们中的一些人也有帮助。

PS：有没有可能阻止库比蒂诺人引入新的操作系统版本，即使这次更改是如此之小？

Answer 2

这最终对我有用，奇怪的是：

$(window).load(function() {
    var deviceAgent = navigator.userAgent.toLowerCase();
    var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
    if (agentID) {

    setTimeout(function(){
        window.scrollTo(1, 1);
    }, 100);

    // http://davidwalsh.name/hide-address-bar
}

}); 

Answer 3

工作中的开发人员通过删除页面之间的转换来设法解决此问题。请参阅下面评论的代码。它在controllers.js中找到。希望这个例子可以帮助您找到项目中的转换代码。

$scope.slide = '';
$rootScope.back = function() {

//$scope.slide = 'slide-right';
 $window.history.back();
}
$rootScope.go = function(path){
//$scope.navLeft = false;
//$scope.navRight = false;
//$scope.slide = 'slide-left';
$location.url(path);
}