IOS8 Safari網站鏈接滾動後不工作

Question

我有一個主要爲iPhone用戶構建的Bootstrap主題的Angular網站，自IOS8更新以來，我發現與滾動有關的問題。該網站表現良好，直到我滾動，一旦我滾動的鏈接行爲不正常，例如，如果我按下按鈕2，從按鈕1的鏈接將打開。另外一些CSS3樣式不起作用，例如:nth-child(even)我已經搜索了幾天，試圖找到此行爲和滾動錯誤之間的鏈接，但我無法在任何地方找到修復。不幸的是我不能發佈的網站鏈接，但它由一個固定的頁眉和頁腳，和一個div設置爲overflow: auto;任何幫助是極大的讚賞:)

NB的：我在滾動的元素使用多個手風琴與

樣式可滾動元件

.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

工作中的開發人員設法通過消除頁面之間的轉換來解決此問題。看到他在下面註釋的代碼。它在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); 
} 

Answer 2

我們有類似的問題。 基於可重複觀測的分析結果： 觸摸的垂直位置未正確傳遞給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: 
 
\t \t viewport = document.querySelector("meta[name=viewport]"); 
 
\t \t viewport.setAttribute('content', 'initial-scale=0.9,width=device-width'); 
 
     break; 
 
    default: 
 
\t \t viewport = document.querySelector("meta[name=viewport]"); 
 
\t \t viewport.setAttribute('content', 'initial-scale=0.75,width=device-width'); 
 
     break; 
 
    } 
 
}

用戶的解決辦法：

• 放大進出。這解決了問題，直到頁面被更改或關閉標籤
• 或者：改變旋轉爲縱向和背部

如果我添加用戶可擴展性=無到視圖端口的設置，這個問題不會出現在所有：

function doOnOrientationChange() 
 
{ 
 
    switch(window.orientation) 
 
    { 
 
    case -90: 
 
    case 90: 
 
\t \t viewport = document.querySelector("meta[name=viewport]"); 
 
\t \t viewport.setAttribute('content', 'initial-scale=0.9,width=device-width,user-scalable=no'); 
 
     break; 
 
    default: 
 
\t \t viewport = document.querySelector("meta[name=viewport]"); 
 
\t \t viewport.setAttribute('content', 'initial-scale=0.75,width=device-width,user-scalable=no'); 
 
     break; 
 
    } 
 
}

但是，這不是我們的一個解決方案。實際上，我們在iOS7發佈後添加了這個設置。這只是iOS7錯誤的解決方法。後來我們找到了另一種解決方法，我們可以刪除這個限制。 現在釋放iOS8後，我有一種dejavú，因爲我們可以添加相同的設置，這次是iOS8中的一個bug的解決方法。 但幸運的是還有另一種解決方法，對我們來說工作正常。在頁面加載後直接，下面是推出由用戶並在模擬變焦：

function ios8BugFixPart1() { 
 
    // zoom out 
 
    switch(window.orientation) 
 
    { 
 
    case -90: 
 
    case 90: 
 
\t \t viewport = document.querySelector("meta[name=viewport]"); 
 
\t \t viewport.setAttribute('content', 'initial-scale=0.8,width=device-width'); 
 
     break; 
 
    default: 
 
\t \t viewport = document.querySelector("meta[name=viewport]"); 
 
\t \t viewport.setAttribute('content', 'initial-scale=0.70,width=device-width'); 
 
     break; 
 
    } 
 
\t setTimeout(ios8BugFixPart2, 200); 
 
} 
 
function ios8BugFixPart2() { 
 
    // zoom in 
 
    switch(window.orientation) 
 
    { 
 
    case -90: 
 
    case 90: 
 
\t \t viewport = document.querySelector("meta[name=viewport]"); 
 
\t \t viewport.setAttribute('content', 'initial-scale=0.9,width=device-width'); 
 
     break; 
 
    default: 
 
\t \t viewport = document.querySelector("meta[name=viewport]"); 
 
\t \t viewport.setAttribute('content', 'initial-scale=0.75,width=device-width'); 
 
     break; 
 
    } 
 
} 
 
setTimeout(ios8BugFixPart1, 1000);

我希望這會幫助你們中的一些爲好。

PS：是否有任何可能阻止庫比蒂諾傢伙推出新的操作系統版本，即使這一次的變化太小了？

Answer 3

這是最終爲我工作的，奇怪的，因爲它是：

$(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 
} 

});