如何阻止移動Safari瀏覽器在輸入焦點上將固定位置設置爲絕對位置？

Question

免責聲明 - 我瞭解在safari中存在固定元素的問題，並且固定元素不受支持，但現在是等等。但是我找不到解決這個確切問題的問題。

鑑於簡單的固定側邊欄，類似的：

.sidebar { 
    position: fixed; 
    top: 10px; 
    right: 10px; 
} 

和相對長的頁面，與輸入元素。

當一個輸入元素被聚焦時，任何固定的元素都變成絕對的 - 我明白爲什麼，safari試圖消除視口 - 這很好，但並不總是合適的。我要求我爲用戶選擇最好的體驗（我自然最瞭解）。

所以這個問題..

有什麼辦法離開固定的元素，即使輸入的元素都集中固定的嗎？

我試圖做一些$(window).on('scroll',魔術和定位元素手動滾動，但它對ipad的相當緊張。

Answer 1

Safari has supported position: fixed至少從版本9.2開始，但如果您遇到困難的問題，您可以通過使文檔元素和主體全屏，然後使用絕對定位來完全創建固定位置效果。滾動然後發生在一些主容器元素而不是主體。使用此方法，您的「固定」元素可以存在於標記中的任何位置。

jsfiddle here

html, 
body, 
.mainContainer { 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    margin: 0; 
} 

.mainContainer { 
    overflow: auto; 
} 

.fixed { 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
} 

Answer 2

爲了實現你的願望，你需要你的方法改變佈局的影響。而不是定位側邊欄的位置：固定您需要使用位置：在一個位置的絕對：相對容器設置爲在該位置的視口的高度：相對容器，你需要另一個使用溢出YY：滾動和 - WebKit的溢出滾動：觸摸

買者：我一般儘量避免使用固定在平板電腦&移動如果可能的位置雖然瀏覽器的支持是有的，在我的經驗，這將是janky和JavaScript解決方案還有很大的提高是希望，我的第一反應就是與設計師挑戰模式。如果我給出的設計包含位置固定元素，當有輸入元素時，我更可能尋求設計解決方案而不是開發設計解決方案，因爲您所描述的焦點問題很難規避並保持高質量的用戶體驗。

標記：

<div class="outer"> 
    <div class="sidebar"> 
    <ul> 
     <li>Dummy list nav or something</li> 

    </ul> 
    </div> 
    <div class="container"> 
     <input type="text" /> 
    <!-- I added 10000 inputs here as a demo --> 
</div> 
</div> 

的CSS：

html,body{ 
-webkit-overflow-scrolling : touch !important; 
overflow: auto !important; 
height: 100% !important; 
} 
.outer { 
    position: relative; 
    overflow: hidden; 

/* I'm using Viewport Units here for ease, but I would more likely check the height of the viewport with javascript as it has better support*/ 
    height: 100vh; 
} 
.sidebar { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    /*added bg colour for demo */ 

    background: blue; 
} 
.container { 
    height: 100vh; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch 
} 
input { 
    display: block; 
} 

這裏有一個CodePen讓你在你的模擬器（演示文稿視圖）打開： https://codepen.io/NeilWkz/full/WxqqXj/

這裏的代碼編輯器視圖： https://codepen.io/NeilWkz/pen/WxqqXj