问题是当盒子阴影与位置一起使用时:粘性它会将内容稍微偏移到右下角而不是保持在顶部。据我所知,该行为仅存在于Chrome 56中,并且不会影响beta& amp;开发版Chrome,Firefox(稳定或其他)和Safari。
要复制此内容,请创建一个示例HTML页面,其中包含一些要滚动的内容和一个导航栏
<nav>
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</nav>
<br>
<main>
<p>Spicy jalapeno bacon ipsum dolor amet kevin sirloin bresaola, meatloaf chuck short loin andouille picanha pork. Meatloaf sausage ribeye, fatback biltong jerky sirloin kielbasa kevin jowl cupim pork chop tail. Cow chuck bacon, fatback filet mignon drumstick
t-bone turkey. Landjaeger sausage beef ribs, andouille fatback swine ground round burgdoggen turkey meatloaf shoulder meatball short ribs. Pork chop pork belly meatloaf leberkas capicola fatback landjaeger. Tail capicola pork chop rump meatball flank
kielbasa swine kevin ground round pork tenderloin cupim sirloin shank. Ham hock kielbasa biltong, rump leberkas pastrami landjaeger brisket. Bresaola chicken ball tip jowl beef meatball turducken ham tail porchetta tongue capicola jerky short ribs.
Flank brisket tongue pork loin frankfurter prosciutto sirloin shank burgdoggen salami hamburger doner corned beef drumstick. Beef ribs chicken tri-tip drumstick, andouille short loin sirloin porchetta. Cupim bacon filet mignon chicken ball tip, shoulder
beef ribs shank leberkas short ribs pork turkey biltong kielbasa ground round. Fatback turducken jowl beef ribs hamburger swine chicken sausage pork belly corned beef pig pork. Ham hock pork loin hamburger corned beef venison, ham chuck leberkas short
ribs. Short ribs filet mignon leberkas bacon turducken beef ribs pork belly ribeye sirloin t-bone prosciutto. Ham picanha sausage, pastrami rump t-bone turkey tenderloin kielbasa short loin. Short loin tongue bacon drumstick filet mignon corned beef.
Sirloin flank landjaeger cow swine kevin capicola. Kielbasa cupim doner, boudin venison turducken ham landjaeger pork loin shoulder pork chop shank filet mignon sausage hamburger. Burgdoggen corned beef alcatra turducken venison tongue porchetta andouille.
Fatback leberkas filet mignon burgdoggen venison ribeye chuck. Tenderloin turducken pork belly tail chicken biltong, ribeye jowl corned beef. Swine brisket t-bone tongue, bresaola pig kevin. Strip steak salami rump flank pork chop alcatra. Beef ribs
burgdoggen ribeye kevin t-bone picanha, landjaeger filet mignon shank frankfurter alcatra ham prosciutto fatback. Venison shank pastrami hamburger ham hock. Frankfurter chuck jerky, pancetta flank sausage turkey tenderloin. Frankfurter ham hock filet
mignon leberkas, chuck pork chop brisket chicken corned beef tri-tip. Bacon shank ball tip, prosciutto beef alcatra capicola landjaeger t-bone brisket sirloin ground round shoulder pig. Ham hock pork frankfurter alcatra burgdoggen picanha pig. Capicola
drumstick cupim, chuck beef ribs pork loin biltong. Short ribs chuck jerky turkey ham fatback. Flank meatball sausage shank filet mignon doner strip steak hamburger landjaeger meatloaf ribeye salami boudin rump pastrami. Fatback filet mignon turkey,
hamburger tri-tip turducken pastrami salami pork chop pork loin tenderloin. Tri-tip alcatra short ribs pancetta beef ribs turkey ball tip sausage pork loin corned beef. Tongue beef pastrami, t-bone turducken meatloaf pork belly. Beef pork meatloaf
jerky doner andouille, ham hock swine capicola boudin turducken short ribs pork loin ball tip. Pig sausage ham tri-tip porchetta ball tip rump tongue burgdoggen swine. Pork loin capicola spare ribs tri-tip brisket jerky. Drumstick short ribs beef
rump, tail filet mignon venison fatback turducken porchetta pig tri-tip pork chop biltong kevin. Tongue chicken ribeye t-bone. Landjaeger boudin sausage turducken salami brisket, meatloaf alcatra ham hock ball tip porchetta tongue spare ribs tail
tri-tip. Beef ribs leberkas doner pork loin turkey ham hock burgdoggen andouille cupim. Capicola boudin bacon strip steak cow beef ribs brisket ground round doner sausage. Swine capicola tail brisket cow ribeye filet mignon. Tenderloin ribeye biltong,
pig frankfurter swine pork chop brisket venison. Pig sirloin meatball turkey brisket cow landjaeger. Picanha pork loin ball tip, leberkas ham chuck kevin ground round turkey andouille corned beef drumstick. Pork belly jerky pork pastrami short loin
kielbasa landjaeger ground round. Ball tip picanha shank beef ribs short ribs tri-tip, ham hock doner shoulder burgdoggen beef. Tenderloin pork chop prosciutto kielbasa drumstick corned beef landjaeger sausage burgdoggen. Venison jowl salami capicola
ball tip beef biltong shankle turkey burgdoggen alcatra sausage. Pancetta tri-tip chuck tail drumstick salami turducken pork ball tip tongue tenderloin. Leberkas salami cow, strip steak cupim shoulder kevin beef pork belly swine prosciutto drumstick
sausage bacon. Shank chicken meatball tongue ribeye leberkas boudin rump.</p>
</main>
然后添加position:sticky和box-shadow
li {
list-style: none;
float: left;
padding-right: 10px;
}
nav {
width: 100%;
height: 24px;
background: red;
position: sticky;
top: 0;
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
见证标题栏移动到右下角。删除框阴影,内容返回到正确的位置。
如果检测到镀铬56或放置带阴影的图像,是否有办法解决此问题而不是简单地移除粘滞位置?
P.S。在我自己的项目中,我使用角度和简单地在位置之间切换:相对于固定的,由于某些原因不起作用。
P.P.S。似乎该问题仅影响HiDPI&amp; Retina显示,我可以在我的MBP&amp;在我的超宽全高清显示器上https://bugs.chromium.org/p/chromium/issues/detail?id=698291&q=position%3A%20sticky&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
我创建了一个jsfiddle来演示这个问题。 https://jsfiddle.net/Nikki1993/1q0xy4n3/1/