[bug]微信小程序使用 scroll-view 和 box-shadow 引起页面抖动

背景

为了实现点点点动态loading效果，并且方便使用（只需要给一个空元素加一个.loading），有如下代码：

    .loader {background-color: #fff;font-size: 25px;width: 8px;height: 8px;border-radius: 50%;margin: 10px auto;position: relative;-webkit-animation: load 1s infinite ease;animation: load 1s infinite ease;}@keyframes load {0% {background-color: #adc2cc;box-shadow: 16px 0 0 0 #e4ebee, -16px 0 0 0#7799AA;}50% {background-color: #e4ebee;box-shadow: 16px 0 0 0 #7799aa, -16px 0 0 0#adc2cc;}100% {background-color: #7799aa;box-shadow: 16px 0 0 0 #adc2cc, -16px 0 0 0#e4ebee;}}

这样，只需要在页面中使用<view class="loading"> </view>即可出现点点点动态loading效果。

但是，在 iphone 真机上，如果<scroll-view>内有以上的 loading ，滑动页面时，会有强烈的抖动。

原因
猜测可能是 animation 中，无限次使用 box-shadow 导致微信小程序 webview 无限次计算元素的宽高导致。

转载于:https://www.cnblogs.com/fayin/p/8549763.html

[bug]微信小程序使用 scroll-view 和 box-shadow 引起页面抖动相关推荐

微信小程序动态添加view
微信小程序动态添加view //index.html<button bindtap='clickMe'> 添加</button> <input type='input' ...
微信小程序（第十九章）- 用户评价页面实现
微信小程序(第十九章)- 用户评价页面实现页面结构的实现页面样式实现五角星实现页面结构的实现代码如下:  <view id="reviewV ...
微信小程序学习2：开发工具快速创建页面（pages）的四个文件(.js，.json，.wxml， .wxss)
微信小程序学习2:开发工具快速创建页面(pages)的四个文件(.js,.json,.wxml, .wxss) [1]首先在pages文件夹下创建一个页面文件夹,比如我打算创建个人中心,我创建一个ho ...
wx.getFuzzyLocation BUG 微信小程序官方BUG 临时处理办法
20220720处理getFuzzyLocation 微信小程序官方BUG 临时办法微信小程序发布了最新的地理位置获取为背景几乎不可能申请到原有的getLocation 但是getFuzzyLoc ...
微信小程序动态添加view组件
在web中,我们动态添加DOM,可以用jQuery的方法,很简单.在微信小程序中怎么实现下面这么需求. 其中,里程数代表上一行到这一行地方的距离(这个不重要):要实现的就是点击增加途径地,就多一行,删 ...
微信小程序两个view同一行两侧对齐
微信小程序中实现两个view容器,同一行两侧对齐布局.将两个view容器,放在一个父view容器中,在父view容器css样式中加入以下属性即可实现预期效果. display: flex; flex- ...
微信小程序点击商品跳转商品详情页面的方法
最近在学习微信小程序电商类开发的时候遇到了一个问题.自己写好的json AIP 接口想通过点击相同的图片跳转到商品详情页面无法实现,几经周折后想到了 navigator 通过页面传参取json数据 ...
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题
一.存在的问题: 微信小程序聊天界面,当input 框获取焦点时会自动调起手机键盘,当键盘弹起时,会导致页面整体上移,页面头信息会消失不见. 二.需要实现的效果键盘弹出时, 底部的 ...
微信小程序-自定义导航栏及返回上一级页面的实现
一.参考文章 1.微信小程序自定义navigationBar 2.微信小程序返回上一级页面的实现代码 3.小程序开发--常用布局二.需求在导航栏中需要显示信息的"未读数量",所 ...

[bug]微信小程序使用 scroll-view 和 box-shadow 引起页面抖动

[bug]微信小程序使用 scroll-view 和 box-shadow 引起页面抖动相关推荐

最新文章

热门文章