一个CSS样式引发的APP崩溃卡顿-webkit-overflow-scrolling:touch

最新推荐文章于 2020-05-25 14:49:18 发布
最新推荐文章于 2020-05-25 14:49:18 发布
阅读量262 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/mjian/p/9250058.html
本文探讨了在iOS应用中使用-webkit-overflow-scrolling:touch样式以提高滑动流畅性的方法，并分析了该样式导致iPhone 6及以上设备崩溃的原因。推测此问题源于样式启用GPU加速从而增加APP运行内存。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

为了让iOS系统下用默认的滑动更加流畅，给滚动区域添加了如下样式：

-webkit-overflow-scrolling:touch

引起APP在iphone 6以上机型的崩溃率升高。经排查验证，去掉这个样式后就恢复正常了。

 

原因推测：因为这个样式会开启GPU加速，导致APP 运行内存过高而引起的崩溃。

 

先记录一下。

转载于:https://www.cnblogs.com/mjian/p/9250058.html

UniApp页面滚动监听魔法指南
m0_72030584的博客
05-23 886
UniApp页面滚动监听魔法指南
微信小程序中遇到的iOS兼容性问题小结
12-12
前言 随着小程序的热度不减，更多的电商大佬来时使用小程序，在微信小程序开发中，经常会遇到一些兼容性的问题，下面这篇文章就记录下在微信小程序中遇到的一些兼容性问题，iOS兼容性 1.iOS中input的placeholder属性字体不居中 对placeholder设置line-height及font-size 对input设置高度 2.iOS中滚动卡顿 设置-webkit-overflow-scrolling:touch; 3.微信小程序中解决iOS中new Date() 时间格式不兼容 在实现倒计时，根据后台返回的时间格式转换时，后台返回了时间格式为”2018-11-12
-webkit-overflow-scrolling
weixin_33709364的博客
08-15 140
-webkit-overflow-scrolling：touch 让移动端页面手机离开后可以继续滚动一段激励，非标准属性。直接加在html样式上就好了。 不能滑动的情况： 在touch事件里加了preventDefault html，body加了height：100% 另外，在ios还是不要用fixed了，自找麻烦。。。 其中一个问题是： 　　滚动条到了最顶部，手指往下拉的时候...
网页在Safari快速滚动和回弹的原理： -webkit-overflow-scrolling : touch;的实现
热门推荐
心流汇聚之地
06-27 11万+
现在很多for Mobile的H5网页内都有快速滚动和回弹的效果，看上去和原生app的效率都有得一拼。 要实现这个效果很简单，只需要加一行css代码即可： -webkit-overflow-scrolling : touch;可用以下网页测试： scroll .container {
深入研究-webkit-overflow-scrolling:touch及ios滚动
weixin_30731305的博客
12-14 1175
目录 1. -webkit-overflow-scrolling:touch是什么？ 2. 解决safari布局抖动的例子 2.1 方案一 2.2 方案二 3. 探究-webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug ...
-webkit-overflow-scrolling:属性
weixin_30853329的博客
03-15 781
之前在用css实现横向滚动时，用到了-webkit-overflow-scrolling:touch实现了滚动回弹效果，今天就彻底的认识下这个家伙以及它所带来的各种坑，并总结了一些排坑的办法。 一.-webkit-overflow-scrolling是什么东西 -webkit-overflow-scrolling控制元素在移动设备上面是否有滚动回弹效果，...
uniapp的一段代码如下，请修改代码，让text文本超出的部分可以在scroll-view 中上下滑动 <scroll-view class="md-content" style="height: 200px;"> <text :selectable="true" :user-select="true"> {{stringCalcBook}} </text> </scroll-view> .md-content { text-align: justify; line-height: 1.5; word-wrap: break-word; padding: 8px 8px; display: flex; flex-direction: column; flex: 1; white-space: pre-wrap; //用来app端长按复制的 -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
最新发布
07-17
2. **滚动卡顿** → 添加 `-webkit-overflow-scrolling: touch`[^2] 3. **嵌套冲突** → 避免多层scroll-view嵌套，使用 `@touchmove.stop` 阻止事件冒泡[^4] 4. **滚动条显示** → 通过CSS隐藏滚动条 > 提示：若需...
<template> <view class="tui-notice-vertical" :style="{width:width?width+'rpx':'100%',height:scrollHeight+'px',background:background,padding:padding,borderRadius:radius+'rpx'}"> <view :id="elId_box" class="tui-seamless__scroll-outer"> <view :id="elId" class="tui-seamless__scroll-box" :style="{paddingTop:scrollHeight+'px', 'animationDuration': animationDuration,'-webkit-animationDuration': animationDuration,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}"> <slot></slot> </view> </view> </view> </template> <script> export default { name: "tui-notice-vertical", props: { //滚动容器宽度 rpx ，0 则使用屏幕宽度 width: { type: [Number, String], default: 0 }, //滚动容器高度 rpx height: { type: [Number, String], default: 400 }, background: { type: String, default: 'transparent' }, radius: { type: [Number, String], default: 0 }, padding: { type: String, default: '0' }, //每秒滚动速度（距离） 默认 20px/s speed: { type: [Number, String], default: 20 }, //backwards: 动画从头开始播；forwards：动画从结束点开始播 activeMode: { type: String, default: 'backwards' } }, watch: { height(val) { this.scrollHeight = uni.upx2px(Number(val) || 600) } }, data() { const elId = `tui_${Math.ceil(Math.random() * 10e5).toString(36)}` const elId_box = `tui_${Math.ceil(Math.random() * 10e5).toString(36)}` return { elId, elId_box, webviewHide: false, boxHeight: 0, contentHeight: 0, scrollHeight: 0, animationDuration: 'none', animationPlayState: 'paused', animationDelay: '0s' }; }, created() { this.scrollHeight = uni.upx2px(Number(this.height) || 600) }, mounted() { // #ifdef APP-PLUS let pages = getCurrentPages(); let page = pages[pages.length - 1]; let currentWebview = page.$getAppWebview(); currentWebview.addEventListener('hide', () => { this.webviewHide = true }) currentWebview.addEventListener('show', () => { this.webviewHide = false }) // #endif this.$nextTick(() => { setTimeout(() => { this.initAnimation() }, 50) }) }, methods: { initAnimation() { let query = [], boxHeight = 0, contentHeight = 0; let noticeQuery = new Promise((resolve, reject) => { uni.createSelectorQuery() // #ifndef MP-ALIPAY .in(this) // #endif .select(`#${this.elId}`) .boundingClientRect() .exec(ret => { this.contentHeight = ret[0].height resolve() }) }) if (this.activeMode === 'forwards') { let boxQuery = new Promise((resolve, reject) => { uni.createSelectorQuery() // #ifndef MP-ALIPAY .in(this) // #endif .select(`#${this.elId_box}`) .boundingClientRect() .exec(ret => { this.boxHeight = ret[0].height resolve() }) }) query.push(boxQuery) } query.push(noticeQuery) Promise.all(query).then(() => { this.animationDuration = `${this.contentHeight /(Number(this.speed) || 20)}s` if (this.activeMode === 'forwards') { this.animationDelay = `-${this.boxHeight / (Number(this.speed) || 20)}s` } setTimeout(() => { this.animationPlayState = 'running' }, 1000) }) } } } </script> <style scoped> .tui-notice-vertical { width: 100%; position: relative; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; z-index: 2; } .tui-seamless__scroll-outer { width: 100%; flex: 1; overflow: hidden; } .tui-seamless__scroll-box { width: 100%; position: absolute; left: 0; top: 0; word-break: break-all; white-space: pre-wrap; animation: notice 10s 0s linear infinite both; animation-play-state: paused; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } @keyframes notice { 100% { transform: translate3d(0, -100%, 0); } } </style>这段代码是uniapp的一个滚动组件，如何让这个组件滚动的起始位置在顶部，从顶部开始滚动
06-11
| iOS平台滚动卡顿 | 添加 `-webkit-overflow-scrolling: touch` | > **提示**：第三方组件需查阅文档确认是否存在 `initial-scroll-position` 等专有属性[^1][^3]。若需封装自定义行为，可参考引用[^3]的picker...
uniapp css 一排按钮超过屏幕的可以向左滑动
06-21
创建一个外层容器，设置固定高度（如果需要）和`overflow-x:auto`（或者`scroll`，根据需求）以及`-webkit-overflow-scrolling:touch`。2.内层容器（直接包裹按钮的容器）设置为`white-space:nowrap`，这样按钮就会...
uni app h5优化页面滚动条
03-21
同时，要注意兼容性，可能需要加上-webkit-overflow-scrolling:touch来保持滚动流畅。 接下来，自定义滚动条样式。用户可能希望滚动条在滚动时出现，或者保持美观。可以用::-webkit-scrollbar-thumb和track来调整...
-webkit-overflow-scrolling:touch
极客神殿
05-25 1万+
之前做移动端项目的时候，同事推荐使用-webkit-overflow-scrolling:touch;属性，当时只是知道在元素内容有滚动条的时候使用这个属性，可以使滚动比较流畅。 然后在MDN上查了一下： -webkit-overflow-scrolling属性是来控制元素在移动设备上是否有回弹的效果。 它有两个属性值： auto:使用普通滚动，当手指在屏幕上离开时，滚动立即停止 touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动
-webkit-overflow-scrolling 学习
ISaiSai的专栏
02-23 1990
当使用了-webkit-overflow-scrolling : touch; 后在Iphone 上的overflow:auto区块的滚动效果会变的更加顺畅，并且有弹簧效果
css：-webkit-overflow-scrolling: touch;
aamen1109的博客
11-23 1105
overflow-y:auto; -webkit-overflow-scrolling: touch; 通常在有弹层出现，并且弹层里面是列表，需要上下滑动查看，而且在安卓手机比较卡顿的时候，会用到这个属性。
crash css for IOS
09-17 147
HELLO WORLD 转载于:https://www.cnblogs.com/colinsupport/p/9663378.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值