实现一个类似抖音视频可上下滑的功能，播放第一个视频的时候点击全屏显示正常，但是上下滑到下一个视频后再点击进入全屏就出现遮挡了 [图片] [图片]

在写CSS3动画时，放在IOS苹果机子上，会出现图层溢出和跳帧现象。代码链接：https://developers.weixin.qq.com/s/Qplg8kmt7dcZ[图片] [代码]body{[代码][代码]  [代码][代码]/*position: flex;*/[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]height[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]  [代码][代码]/*overflow: hidden;*/[代码][代码]}[代码][代码].ktdm-apply-takename{[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]height[代码][代码]: [代码][代码]1150[代码][代码]rpx;[代码][代码]  [代码][代码]background-color[代码][代码]: [代码][代码]#F0F0F0[代码][代码];[代码][代码]  [代码][代码]z-index[代码][代码]: [代码][代码]1[代码][代码];[代码][代码]}[代码][代码]/*制作出球形div*/[代码][代码].ktdm-apply-takename-time{[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]474[代码][代码]rpx;[代码][代码]height[代码][代码]: [代码][代码]474[代码][代码]rpx;[代码][代码]  [代码][代码]margin[代码][代码]: [代码][代码]0[代码] [代码]auto[代码][代码];[代码][代码]  [代码][代码]position[代码][代码]:[代码][代码]relative[代码][代码];[代码][代码]  [代码][代码]border-radius: [代码][代码]50%[代码][代码];[代码][代码]  [代码][代码]top[代码][代码]: [代码][代码]80[代码][代码]rpx;[代码][代码]  [代码][代码]overflow[代码][代码]: [代码][代码]hidden[代码][代码];[代码][代码]  [代码][代码]text-align[代码][代码]: [代码][代码]center[代码][代码];[代码][代码]}[代码][代码]/*水球图片*/[代码][代码].apply-time-image{[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]495[代码][代码]rpx;[代码][代码]height[代码][代码]: [代码][代码]495[代码][代码]rpx;[代码][代码]}[代码][代码].ktdm-apply-takename-blq{[代码][代码]   [代码][代码]width[代码][代码]: [代码][代码]500[代码][代码]rpx;[代码][代码]height[代码][代码]: [代码][代码]500[代码][代码]rpx;[代码][代码]   [代码][代码]position[代码][代码]: [代码][代码]relative[代码][代码];[代码][代码]   [代码][代码]left[代码][代码]: [代码][代码]-14[代码][代码]rpx;[代码][代码]   [代码][代码]text-align[代码][代码]: [代码][代码]center[代码][代码];[代码][代码]}[代码][代码].apply-time-water{[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]500[代码][代码]rpx;[代码][代码]height[代码][代码]: [代码][代码]500[代码][代码]rpx;[代码][代码]  [代码][代码]border-radius: [代码][代码]50%[代码][代码];[代码][代码]  [代码][代码]position[代码][代码]:[代码][代码]relative[代码][代码];[代码][代码]  [代码][代码]top[代码][代码]: [代码][代码]-250[代码][代码]rpx;[代码][代码]  [代码][代码]/*background-color: red;*/[代码][代码]}[代码][代码].apply-time-water-png{[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]2100[代码][代码]rpx;[代码][代码]height[代码][代码]: [代码][代码]300[代码][代码]rpx;[代码][代码]  [代码][代码]position[代码][代码]: [代码][代码]absolute[代码][代码];[代码][代码]  [代码][代码]top[代码][代码]: [代码][代码]-30[代码][代码]rpx;[代码][代码]  [代码][代码]right[代码][代码]: [代码][代码]0[代码][代码];[代码][代码]  [代码][代码]animation: apply-time-water-png [代码][代码]6.2[代码][代码]s linear infinite;[代码][代码]}[代码][代码]@keyframes apply-time-water-png{[代码][代码]   [代码][代码]from {transform: translateX([代码][代码]-15[代码][代码]rpx);}[代码][代码]  [代码][代码]to {transform: translatex([代码][代码]925[代码][代码]rpx);}[代码][代码]}[代码][图片]

出问题的机型有ihpnoex和华为 分享小程序卡片，图片是canvas绘制完成后，用wx.canvasToTempFilePath导出的，导出图片的尺寸比例为5/4（已设置destWidth、destHeight） 分享出去后，大部分是正常的，偶然会出现分享图片变形并且显示不全 [图片]

此问题是偶现，没有必现的方式，无代码片段可参考 分享小程序卡片，图片是canvas绘制完成后，用wx.canvasToTempFilePath导出的，导出图片的尺寸为500*400（已设置destWidth、destHeight） 分享出去后，有较低几率会出现图片显示不全，宽高均未100%显示，只显示左上角部分 - 当前 Bug 的表现（可附上截图） [图片] - 预期表现 [图片] - 复现路径 - 提供一个最简复现 Demo