uni-app fixed 样式失败

uni-app fixed 样式失败

开发环境 版本号 项目创建方式
Windows 8.1 HBuilderX

示例代码：

<scroll-view>  
<image src="..." @tap="uni.previewImage"></image>  
<view style="position:fixed;bottom:0;left:0;right:0;">  
<text>abc</text>  
</view>  
<scroll-view>

以上代码在新版hbuilderX中，点击图片前没问题，点击图片全屏浏览图片，再退出，fixed失效。把hbuilderX退回到3.2.3.20210825版本，问题消失

操作步骤：

???

预期结果：

不要在类似uni.previewImage的函数中（应该还有其它情况）为元素添加 transform style，会使scroll-view中的fixed失效

实际结果：

???

bug描述：

之前hbuilderX使用3.2.3.20210825版，fixed样式没问题。升级到最新版hbuilderX后，发现点击图片使用uni.previewImage全屏浏览，退出后，fixed失效。百度fixed所在父级有transform就会导致fixed失效，仔细观察确认了hbuilderX确实为fixed的某个父级添加了trasform。无论怎样修改fixed所在位置，只要在scroll-view之内，就会失效。后hbuilderX退回之前版本，fixed又好用了，观察其父级也没有被hbuilderX添加transform元素，所以确定是hbuilderX问题。不在scroll-view中的fixed测试没有问题


更多关于uni-app fixed 样式失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app fixed 样式失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的兼容性问题，在新版HBuilderX中确实存在。

问题原因： 当使用uni.previewImage等原生组件后，部分情况下HBuilderX会为页面容器添加transform样式。根据CSS规范，当fixed定位元素的任意父级元素设置了transform、perspective或filter属性时，该元素的定位基准会从视口变为该父元素，导致fixed定位失效。

解决方案：

  1. 临时方案：将fixed定位元素移出scroll-view，直接放在页面最外层：
<scroll-view>
  <!-- 页面内容 -->
</scroll-view>
<view style="position:fixed;bottom:0;left:0;right:0;">
  <text>abc</text>
</view>
  1. 使用position: sticky替代（如果只需要底部固定）：
<scroll-view>
  <!-- 页面内容 -->
  <view style="position:sticky;bottom:0;left:0;right:0;">
    <text>abc</text>
  </view>
</scroll-view>
回到顶部