固定在iOS Chrome上的頂部標題欄在滾動時左右移動

以下帶位置固定標題欄的簡單頁面，在大多數瀏覽器中都可以正常工作等。但是，如果您在Google Chrome瀏覽器中的iOS上滾動瀏覽頁面最終標題欄會向下移動頁面，如下面的屏幕截圖。固定在iOS Chrome上的頂部標題欄在滾動時左右移動

任何想法如何解決？

謝謝:)

<!DOCTYPE html> 
<html> 
<head> 
    <title>position test</title> 
    <meta charset="utf-8" /> 
</head> 
<body> 
    <div style="position: fixed; background-color: aqua; width: 100%; top: 0; left: 0; line-height: 60px; height: 60px;"> 
     Fixed header 
    </div> 
    <div style="padding-top: 60px;"> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta aliquet dictum. Aliquam massa libero, consectetur et purus sed, luctus porttitor ligula. Phasellus tempus risus at elit sagittis, sed tincidunt erat rutrum. Donec non dictum turpis. Vestibulum sapien tellus, tincidunt sed ex a, pretium facilisis est. Suspendisse potenti. Fusce laoreet turpis turpis, a rhoncus diam fringilla ac. Proin turpis arcu, hendrerit viverra neque quis, placerat tempor ligula. Duis ut scelerisque ante. Etiam posuere est ut molestie fermentum. Sed feugiat tortor at libero ultrices, vitae consectetur nibh luctus. 
     </p> 
     <p> 
      Sed nulla enim, tincidunt non laoreet quis, congue aliquam nisl. Sed dapibus in erat cursus rutrum. Nullam efficitur sem ipsum, vitae sagittis est tristique vitae. Ut dignissim est eget nisi condimentum posuere. Duis nec neque tempor, finibus sem sed, varius risus. Nullam convallis imperdiet sem vel sagittis. Nulla ultricies sagittis vestibulum. In semper ante ipsum, ac dignissim diam bibendum et. Nam in sapien sem. 
     </p> 
     <p> 
      Phasellus neque nibh, pharetra ac dui et, iaculis lacinia ipsum. Phasellus laoreet eros ut lectus viverra dictum. Mauris vitae neque maximus, hendrerit enim gravida, ornare magna. Sed rhoncus vitae nunc sed iaculis. Donec vitae enim ut enim fermentum scelerisque. Nulla ut vestibulum leo. In ut urna in neque tempor maximus non et massa. In eu tincidunt quam. Donec eu lectus vehicula, consequat enim et, porttitor libero. Phasellus magna tellus, rhoncus non quam vitae, congue sagittis nunc. Mauris bibendum ultrices arcu a lobortis. Aliquam erat volutpat. Ut quis mi sit amet nulla tincidunt tincidunt. 
     </p> 
     <p> 
      Nam at interdum nulla, eget ultricies libero. Suspendisse est elit, malesuada sit amet hendrerit nec, posuere et purus. Vivamus sed eros ut nisi cursus hendrerit. Curabitur vel lacus maximus, tempus nulla sed, volutpat risus. Etiam in blandit quam. Nullam lacinia neque eu ligula lobortis facilisis. Quisque ipsum erat, iaculis vitae nunc vitae, egestas feugiat enim. 
     </p> 
     <p> 
      Fusce consectetur leo in est sodales, ut congue est commodo. Donec cursus odio sapien, id malesuada sem dictum eget. Sed sit amet sodales nisl, sed venenatis tortor. Nulla facilisi. Maecenas maximus tortor sed nisi mattis luctus. Proin id diam sagittis ante pulvinar dictum. Donec volutpat nec nibh eget dictum. Donec tellus turpis, hendrerit et risus sed, viverra porttitor leo. Pellentesque non vulputate arcu, eget finibus tortor. 
     </p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta aliquet dictum. Aliquam massa libero, consectetur et purus sed, luctus porttitor ligula. Phasellus tempus risus at elit sagittis, sed tincidunt erat rutrum. Donec non dictum turpis. Vestibulum sapien tellus, tincidunt sed ex a, pretium facilisis est. Suspendisse potenti. Fusce laoreet turpis turpis, a rhoncus diam fringilla ac. Proin turpis arcu, hendrerit viverra neque quis, placerat tempor ligula. Duis ut scelerisque ante. Etiam posuere est ut molestie fermentum. Sed feugiat tortor at libero ultrices, vitae consectetur nibh luctus. 
     </p> 
     <p> 
      Sed nulla enim, tincidunt non laoreet quis, congue aliquam nisl. Sed dapibus in erat cursus rutrum. Nullam efficitur sem ipsum, vitae sagittis est tristique vitae. Ut dignissim est eget nisi condimentum posuere. Duis nec neque tempor, finibus sem sed, varius risus. Nullam convallis imperdiet sem vel sagittis. Nulla ultricies sagittis vestibulum. In semper ante ipsum, ac dignissim diam bibendum et. Nam in sapien sem. 
     </p> 
     <p> 
      Phasellus neque nibh, pharetra ac dui et, iaculis lacinia ipsum. Phasellus laoreet eros ut lectus viverra dictum. Mauris vitae neque maximus, hendrerit enim gravida, ornare magna. Sed rhoncus vitae nunc sed iaculis. Donec vitae enim ut enim fermentum scelerisque. Nulla ut vestibulum leo. In ut urna in neque tempor maximus non et massa. In eu tincidunt quam. Donec eu lectus vehicula, consequat enim et, porttitor libero. Phasellus magna tellus, rhoncus non quam vitae, congue sagittis nunc. Mauris bibendum ultrices arcu a lobortis. Aliquam erat volutpat. Ut quis mi sit amet nulla tincidunt tincidunt. 
     </p> 
     <p> 
      Nam at interdum nulla, eget ultricies libero. Suspendisse est elit, malesuada sit amet hendrerit nec, posuere et purus. Vivamus sed eros ut nisi cursus hendrerit. Curabitur vel lacus maximus, tempus nulla sed, volutpat risus. Etiam in blandit quam. Nullam lacinia neque eu ligula lobortis facilisis. Quisque ipsum erat, iaculis vitae nunc vitae, egestas feugiat enim. 
     </p> 
     <p> 
      Fusce consectetur leo in est sodales, ut congue est commodo. Donec cursus odio sapien, id malesuada sem dictum eget. Sed sit amet sodales nisl, sed venenatis tortor. Nulla facilisi. Maecenas maximus tortor sed nisi mattis luctus. Proin id diam sagittis ante pulvinar dictum. Donec volutpat nec nibh eget dictum. Donec tellus turpis, hendrerit et risus sed, viverra porttitor leo. Pellentesque non vulputate arcu, eget finibus tortor. 
     </p> 
    </div> 
</body> 
</html>

來源

2016-02-05 user1259167

似乎是一個（最近）已知錯誤：https://bugs.chromium.org/p/chromium/issues/detail?id=585460 – majman

這是一個知道是不是BUG。 bugs.chromium.org/p/chromium/issues/detail?id=585460 – fred1234

您的鏈接已死亡。 – katzkode

-1

你嘗試使用重要！？

<div style="position:fixed !important; top:0px !important; left:0px !important;">

來源

2017-03-24 14:22:41 tonyp

固定在iOS Chrome上的頂部標題欄在滾動時左右移動

回答

相關問題