项目中遇到的各种bug和踩过的坑
zepto 赋值时单位转换问题
zepto 的 animate 方法移动某个元素的位置时,例如修改某个绝对定位的元素的 left 值,要与修改前的值单位一致,修改前如果是像素值,修改后也要是像素值,否则android 手机上将不会出现动画效果,而是直接把元素放到修改后的位置。使用 jQuery 时会进行计算并最后赋值为像素值,zepto 省略了转换所以会有单位问题,需要注意。
transform:rotate 在 Safari 中渲染 bug
transform:rotateY, transform:rotateX 在Safari浏览器上bug,该bug会导致在执行动画元素层级之上的元素闪动。解决方案是在元素执行rotate的同时添加一个 translateZ(1000px),在动画执行到最后 translateZ(-1px),或者把 translateZ(-1px) 直接以css的方式写在该元素样式里。不过该元素在执行动画时会覆盖在其他元素之上,动画结束时才会回到原来的层级。
注意:元素添加 translate 时不能同时有prospect。否则 translateZ(1000px) 会正常渲染,即朝用户拉近了1000个像素(如果translateZ的值较小,例如楼主试过1px 10px,都没法修复该bug,暂时还未找到原因)。
jquery ui Draggable 对使用 transform:scale 缩放的元素进行脱拽时,元素在拖拽开始时会跳一下偏离起始位置。
先说解决方法, 1、2里选择一种(笔者使用了方法2):
1、在 jquery.ui.draggable.js 里把
//The element's absolute position on the page minus margins
this.offset = this.positionAbs = this.element.offset();
替换为
//The element's absolute position on the page minus margins
this.offset = this.positionAbs = { top: this.element[0].offsetTop, left: this.element[0].offsetLeft };
2、如果不想修改 jquery.ui.draggable.js 就修改绑定拖拽的代码,如下:
var recoupLeft, recoupTop; $(element).draggable({start: function (event, ui) { var left = parseInt($(this).css('left'),10); left = isNaN(left) ? 0 : left; var top = parseInt($(this).css('top'),10);top = isNaN(top) ? 0 : top; recoupLeft = left - ui.position.left;recoupTop = top - ui.position.top;},drag: function (event, ui) { ui.position.left += recoupLeft; ui.position.top += recoupTop; } });
至于造成这种情况的原因,看到有人说是因为draggable依赖的jquery offset()方法里使用的js原生函数getBoundingClientRect,对于css3 transform后的元素在不同浏览器里获取的值会不同:
'This is a result of draggable's reliance on the jquery offset()
function and offset()
's use of the native js function getBoundingClientRect()
. Ultimately this is an issue with the jquery core not compensating for the inconsistencies associated with getBoundingClientRect()
. Firefox's version ofgetBoundingClientRect()
ignores the css3 transforms (rotation) whereas chrome/safari (webkit) don't.'
如图:
但是笔者用最新的chrome和ff里测试,调用该函数获取的值是一致的,即浏览器在底层已经统一了。但两者都有拖拽开始时,元素跳动的现象,因此可以推测不是该原因造成的上述问题,但是解决方法(笔者使用了方法2)是有效的。
转载于:https://www.cnblogs.com/AustinAn/p/5015413.html
项目中遇到的各种bug和踩过的坑相关推荐
- [vue] 有在vue中使用过echarts吗?踩过哪些坑?如何解决的?
[vue] 有在vue中使用过echarts吗?踩过哪些坑?如何解决的? vue 没用过echarts react到是用过 不过我想应该差不多 ,多注意dom的渲染时机 和chart的实例化时机 在相 ...
- 2021年C++项目中的十大Bug:乍一看都正确的代码,实则暗藏玄机
作者 | Vladislav Stolyarov 译者 | 弯月 出品 | CSDN(ID:CSDNnews) 在程序员的新年祝福中,大家或多或少会来一句,新年编码无Bug.Bug越写越少--对程序员 ...
- 记录自己首次在eclipse中配置tomcat并运行jsp踩过的坑
记录自己首次在eclipse中运行jsp踩过的坑 我使用的版本 1.jdk下载 java环境配置 2.Tomcat 服务器的安装与配置 3.下载eclipse并配置tomcat 3.1第一次下载ecl ...
- uni-app项目中引入Vant UI组件库(完美避坑!!!)纯净版
文章目录 第一步,HBuilder X中新建一个uni-app的项目 第二步,HBuilder X提示项目创建成功,在HBuilder X用命令行窗口打开创建的项目(或直接在创建的项目文件夹内用cmd ...
- 前端项目中碰到的难题bug
1.this.parent或者是this.parent或者是 this.parent或者是this.children 这种方式获取与传递数据十分不妥, 因为没有明确数据来源与使用者, 这样就会导致除了 ...
- 在项目中遇到的一些bug
elemetn-ui 版本 2.4.6 问题:在IE中日期时间选择器不显示初始化的数据,在chrome中正常显示 原因:后端返回的数据"2019-02-15T16:00:00.000+000 ...
- 一般项目中是如何调bug的 ------- 手把手带你体验整个流程
调bug流程 一.运行代码,发现错误. 二.找到报错的位置. 三.如果注释后运行正常了,那么就是注释掉的部分有误了(这是最想看到的结果了): 四.于是就认为应该不是这里的锅,那么我们将中main 函数 ...
- 安卓框架,分析项目中surfaceFlinger出现的bug ---queueBuffer: BufferQueue has been abandoned
学习android graphic很好的系列文章:https://blog.csdn.net/lewif/article/details/50526494 GlSurfaceview和egl的相关文章 ...
- 欢迎访问github地址,并指出项目中的缺陷和BUG
GitHub地址:https://github.com/igithu 转载于:https://www.cnblogs.com/biyeymyhjob/p/4341472.html
- 完美解决 - 如何将一个项目打包到本地maven库,然后供另一个项目中引用。
1.说明 前几天本人想构建一个公共模块代码,比如校验,字符串处理等公共模块代码.需要在别的项目中引入.然后使用idea安装到本地maven库中后,在另一个项目中引入一直报错.踩过各种坑之后,特意整理一 ...
最新文章
- 【Python】12、字典的实现
- 浅谈JVM的GC策略
- EXCEL打开CSV文件乱码的解决方法
- android 长按缩放拖动_十年Android之路面试2000人,面试准备+内部泄露核心题(中高级)...
- java jndi使用_Java项目中使用JNDI连接数据库
- Java-eclipse快捷键及设置
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
- 计算机表演赛vr创意大赛,计算机表演赛新增VR创意大赛
- 全栈JavaScript之路(十三)了解 ElementTraversal 规范
- 套接字的作用与一般使用_05 | 使用套接字进行读写
- 2017山东省ACM省赛总结(校史首金!!)
- 戴尔dell电脑恢复出厂设置教程(BIOS恢复出厂设置,新版台式机)
- 微信mac电脑版客户端 v1.0.1.16 官方版
- NetXray嗅探器介绍
- 一本正经的聊一聊面试官的心理
- 在Linux 中安装cmus 用命令行中玩转音乐库
- jp.ne.so_net.ga2.no_ji.jcom.JComException: createInstance() failed HRESULT=0x800401F3L
- 数据整理—dplyr包(mutate系列)
- pytorch Load部分weights
- C语言实现输入学号,分数计算总分和平均分
热门文章
- Kafka 麒麟先生_近百位超人气嘉宾出席元旦萤火虫,重磅新企划蓄势待发!
- oracle goldengate 触发器,Oracle goldengate的触发器错误 OGG-00869
- java 不安全操作_Java新手求助:怎么会出现使用了未经检查或不安全的操作。
- 看看我能帮上大家的什么忙? 文平
- BZOJ 4178 A
- 物联网发展 制定技术标准才能更好监管
- java----数据结构与算法----JavaAPI:java.util.Collection接口
- css固定姓名显示长度,排列更整齐
- AndroidStudio插件GsonFormat快速实现JavaBean
- DOD,与cisco三层模型