爲什麼固定定位在iOS上不適用於flex？

我在我的網站上有一個隱藏在較小屏幕上的側邊欄。當用戶點擊一個按鈕時，它會打開。爲什麼固定定位在iOS上不適用於flex？

側邊欄的內容很長，所以需要滾動。我實現了這個使用：

position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 700px; 
    min-width: 700px; 
    max-height: 100%; 
    overflow-y: scroll;

我也是用柔性使側邊欄還具有下列規則：

display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    display: flex;

側邊欄顯示以及在舊的iOS設備上查看時，除了所有的瀏覽器（Chrome或Safari ）運行iOS 9.與這些問題是內容重疊 - 似乎固定div的高度被忽略。

Here is a jsfiddle of the issue

如果我從演示刪除position: fixed它在iOS中顯示正常。另外，如果我刪除柔印設置，它也顯示正常。這似乎是兩者的結合。

我已經試過：

height: automin-height: 100%max-height: 100%height: 100vh
bottom: 0
position: absolute //這不會滾動

如果沒有解決此問題的CSS解決方案，那麼檢查是否正在使用ios設備並應用單獨的樣式表即可？

任何意見非常讚賞。

HTML的完整性：

<div id="sidebar"> 
    <div class="block"> 
    text content... 
    </div> 
<div class="block"> 
    text content... 
    </div> 
... 
</div>

來源

2017-01-18 sol

我的解決辦法是使用檢測的ios：

/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)

，然後改變側邊欄的CSS display: block

這是不理想的，和我仍然不明白爲什麼iOS有固定和彈性相結合的問題...

來源

2017-01-18 14:13:03 sol

爲什麼固定定位在iOS上不適用於flex？

回答

相關問題