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 之后，我有一种似曾相识的感觉，因为我们可以添加相同的设置，这一次作为 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：有没有可能阻止 Cupertino 的家伙推出新的操作系统版本，即使这次的变化是如此之小？

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