收藏
回答

【bug提交】一个比较头疼的css3渲染bug

问题模块 框架类型 终端类型 操作系统 微信版本 基础库版本
框架 小程序 微信iOS客户端 iOS 6.6.3 1.9.8

.transition-left{ transform: translateX(-750rpx); }

.transition-right{ transform: translateX(750rpx); }

.page-left{ position:absolute; z-index: 0; transition: All 0.4s ease; }

.page-right{ position:absolute; z-index: 0; transition: All 0.4s ease; }


transition-left是将一个view置于现在所显示的界面左边的css3特效,right是右边。

page-left是左边页面css,right是右边,通过 transition: All 0.4s ease; 来实现页面滑出去以及划进来的特效

我发现当将一个页面置于现在所显示的页面左边,也就是将它隐藏到左边的时候,一切正常,小程序不允许我左右滑动来滑到那个页面(当我没做js滑动切换的时候)

然而,当一个页面通过这个css置于现在显示的页面的右边的时候,此时居然能直接划过去了,相当于原本750rpx宽的页面变成了1500rpx,就算我给最外层的view添加

style="overflow-x:hidden; width:750rpx;" (超出750rpx的部分隐藏,也就是阻止页面左右滑动至空白区域);

也没有效果。

但是,PC上模拟的时候无法滑动,一切正常。只有手机上预览才会出现这个bug

这个bug挺影响实现页面左右切换特效实现的(自带swiper满足不了要求),希望微信官方能够早日解决,谢谢!



图片做了保密处理。

第一张图一开始显示的是左边页面,右边页面通过上面说的css隐藏在右边。此时可以直接左右滑动滑倒右边去。但PC上模拟无法滑动

第二张图一开始显示的是右边页面,左边页面通过css隐藏在左边,此时手机和PC上均无法滑动,是期望的正常表现

最后一次编辑于  2018-02-12  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

2 个回答

  • 参宿四
    参宿四
    2018-02-13

    问题解决了,可以给隐藏到右边的添加position:fixed属性,这样就划不过去了

    2018-02-13
    赞同
    回复
  • 冉啟皓
    冉啟皓
    2018-04-16

    谢谢楼主,我用movableview做一个滑动效果时也遇到同样的问题

    2018-04-16
    赞同
    回复