IOS浏览器兼容问题：拖拽缩放DIV导致IOS浏览器内存崩溃页面刷新

最新推荐文章于 2024-05-09 10:41:11 发布
最新推荐文章于 2024-05-09 10:41:11 发布
阅读量142 收藏
点赞数 3
文章标签： ios javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45061261/article/details/136445271
版权

项目中有一个拖拽缩放图片的功能，拖拽是用定位实现的，通过修改top/left来实现位置的偏移。缩放是通过transform来实现的。

在PC设备和安卓设备上，这个功能都能正常使用，当到IOS设备上时，开始出现崩溃后页面自动刷新的情况。根据排查，得出结论，拖拽和缩放同时使用两种不同的方式导致页面计算加剧，IOS设备自身内存不高(此项目是3D项目，内存损耗加剧)，容易崩溃。

解决方案：此功能纯css通过transform实现

前端小伍
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
IOS浏览器调试工具.rar
04-10
IOS浏览器调试工具
h5复制到剪切板兼容ios浏览器
03-25
ios+android+h5复制剪切板
点击复制Input框中的链，兼容ios或safari浏览器
01-07
var copyText = function (text) { // 数字没有 .length 不能执行selectText 需要转化成字符串 var textString = text.toString(); var input = document.querySelector(‘#copy-input’); if (!input) { input = document.createElement(‘input’); input.id = “copy-input”; // input.readOnly = true; // 防止ios聚焦触发键盘事件 $(‘#copy-input’).at
解决 overflow :auto 整个浏览器出现进度条_H5 问题及解决方法
weixin_39641334的博客
11-21 824
移动端 H5 相关问题汇总：1px 问题响应式布局iOS 滑动不流畅iOS 上拉边界下拉出现白色空白页面件放大或缩小不确定性行为click 点击穿透与延迟软键盘弹出将页面顶起来、收起未回落问题iPhone X 底部栏适配问题保存页面为图片和二维码问题和解决方案微信公众号 H5 分享问题H5 调用 SDK 相关问题及解决方案H5 调试相关方案与策略移动端 H5 相关基础技术概览原理与实践之前两篇文章...
解决 overflow :auto 整个浏览器出现进度条_12个前端必会 H5 问题及解决方法
weixin_39769627的博客
11-23 910
前言作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。问题下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！（经常更新该文）移动端 H5 相关问题汇总：1px 问题响应式布局iOS 滑动不流畅iOS 上拉边...
记一次移动端H5开发所遇到的问题与细节,以及ios兼容
想飞的猪的博客
09-14 3832
第一次弄移动端H5项目开发，虽然是简单的页面展示，但也遇到了很多细节问题与兼容问题，尤其是h5视频标签video, 一.移动端禁止缩放 兼容 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 主要属性是user-sca...
IT忍者神龟之浏览器兼容性问题
IT忍者神龟
03-15 364
兼容性我们从一下几个方向来说1.H5兼容性（移动端）2.HTML兼容性3.JavaScript兼容性  H5兼容性（移动端）H5页面窗口自动调整到设备宽度，并禁止用户缩放页面//一、HTML页面结构 &lt;meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-sca...
Web开发ios设备上的浏览器图片（拖拽）闪退
前端小伍的博客
02-21 215
ios设备浏览器拖拽图片闪退；ios设备性能/内存问题；兼容问题。
ios 屏幕滑动时z-index失效问题(android不会出现)
liucai1018的博客
09-07 958
问题描述： 为一块区域设置z-index值，让它在上面；如A区域是2，B区域z-index:3，A和B区域有部分重叠 在android上运行时没有问题，但在ios上会出现一个问题：上下滑动的时候，发现A区域和B区域的重叠部分上面为A了 原因： ios系统，当滑动屏幕时，z-index失效了，因此导致A-B区域重叠处B被遮挡了 解决办法： 添加如下：-webkit-transform属性允许我们对元素进行旋转、缩放、移动或倾斜，这里是进行移动，但距离都是0，即可解决问题 原因暂时不明..
ios微信浏览器返回不刷新问题完美解决方法
08-29
主要介绍了ios微信浏览器返回不刷新问题完美解决方法,需要的朋友可以参考下
WebBrowser：iOS浏览器iOS的Web浏览器
02-04
Web浏览器（iOS） 一款用于网页浏览的APP（适用于iOS的Web浏览器） 特点-功能 扩展功能，通过JavaScript注入来扩展功能，在菜单->扩展页面进行选择，目前包括（大家如果有想要的功能，或者直接上代码更好，欢迎大家...
webiew滚动条禁用_iOS WKWebView水平滚动条的兼容问题
weixin_39916360的博客
01-13 1017
苹果从iOS8增加了WKWebView以来。和UIWebView和平相处多年。WKWebView从性能上和资源使用方面确实更胜一筹。但也存在一些很奇怪的兼容问题。各路苹果开发者大神也总结很多经验。例如，如何从UIWebView迁移到WKWebView，采坑分享。WKWebView和UIWebView的性能比对等。站在前人的基础上，终于摸索了这个控件。(本人不是苹果开发者，没有系统学习过object...
iOS 中高级面试题(附答案)
热门推荐
鹏哥的博客
09-04 1万+
RunLoop 可以称之为运行循环，在程序运行过程中循环做一些事情，如果没有 RunLoop 程序执行完毕就会立即退出，有 RunLoop 程序会一直运行，并且时时刻刻在等待用户的输入操作。RunLoop可以在需要的时候自己跑起来运行，在没有操作的时候就停下来休息。充分节省CPU资源，提高程序性能。
css 清空ios端_优秀前端工程师必备: (总结) 清除原生ios按钮样式
weixin_35599378的博客
12-24 170
写移动端的web开发时， 需要清除IOS本身的各种样式：1.消除ios按钮原生样式, 给按钮加自定义样式:input[type="button"], input[type="submit"], input[type="reset"],input[type=text],input[type=password]{ -webkit-appearance: none; } textarea { -webk...
iOS block处理button的点击事件
最新发布
sgliquangang的专栏
05-09 369
【代码】iOS block处理button的点击事件。
【iOS】方法交换(Method Swizzling)
weixin_72437555的博客
05-03 1211
上文讲到了iOS的消息发送机制，在消息机制中我们了解到了SEL、IMP等方法知识，由此延伸到iOS黑魔法方法交换，本篇着重讲解iOS的方法交换的应用场景与原理这篇文章主要总结了的各种应用场景，例如防止按钮被多次点击，进行hook操作以及数组与KVO的兜底操作，应用场景非常广泛，值得深入学习iOS Crash防护系统-IronManiOS KVO 崩溃防护笔记。
Cordova ios-deploy was not found
白鹤的博客
05-07 208
Cordova ios-deploy was not found
vue iOS浏览器底部兼容问题
05-10
在Vue中，iOS浏览器底部兼容问题通常是由于移动端浏览器在滚动时会触发底部工具栏的显示/隐藏而引起的。为了解决这个问题，可以尝试以下几个方法： 1. 使用 `vue-touch-action` 库 该库可以帮助开发者控制触摸事件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值