移动端Chrome滚动到顶部时position:fixed粘性头部失效问题

核心诱因 #

你遇到的问题是部分旧版移动端Chrome WebKit内核的渲染bug，触发条件是position: fixed元素的所有上层父元素均设置了display: inline属性：

• 行内元素不具备独立盒模型的固定宽高，尺寸完全由内部内容撑开，当子元素.content-left设置position: fixed脱离文档流后，上层行内父元素的计算高度会被判定为0，部分版本的移动端Chrome在滚动重绘时，会误将该fixed元素判定为属于尺寸为0的父元素的从属内容，认为元素不在视口范围内，触发自动裁剪逻辑导致元素消失。
• 你给.header-pre-container设置position: fixed时运行正常，是因为position: fixed会强制元素生成独立的块级格式化上下文（BFC），元素的display属性会被隐式调整为块级，不再遵循行内元素的渲染规则，自然避开了该bug。

• 移除所有.content-left上层父元素的display: inline内联样式，替换为display: block，结构容器本身就应该使用块级属性，行内属性仅适用于文本、图标等行内容器。
• 可选优化：给.content-left._sticky添加will-change: position属性，提前告知浏览器该元素的定位属性会发生变化，触发分层渲染，降低滚动重绘的异常概率。
• 额外排查项：确认滚动监听逻辑没有在滚动到顶部时意外移除_sticky类名，排除JS逻辑问题导致的样式失效。

内容的提问来源于stack exchange，提问作者Petro Chaikivskyi