项目中遇到的各种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)是有效的。
项目中遇到的各种bug和踩过的坑的更多相关文章
- 项目中容易出现的BUG预警
之前没有记录BUG的习惯导致在同一个坑里边栽了好几次,于是将最近几个项目中遇到的问题整理一下,在进行新项目时预警一遍: 使用携带有搜索功能的分页查询时,注意当用户更改了查询条件但没有点击查询按钮直接点 ...
- 使用vue开发项目需要注意的问题和可能踩到的坑
最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下: 一.生命钩子使用需要注意的地方 1.beforeCreat ...
- angular6项目中使用echarts图表的方法(有一个坑,引用报错)
1.安装相关依赖(采用的webpack) npm install ecahrts --save npm install ngx-echarts --save 2.angular.json 配置echa ...
- vue中异步请求渲染问题(swiper不轮播)(在开发过程中遇到过什么问题、踩过的坑)
问题描述: 用vue封装一个swiper组件的时候,发现轮播图不能轮播了. 原因: 异步请求的时间远大于生命周期执行的时间,mounted初始化DOM时数据未返回,渲染数据是空数组,导致轮播图的容器层 ...
- 使用Ajax中get请求发送Token时踩的那些坑
在使用惯了各种牛X的插件以后,在使用原生组件写一些小东西的时候总是有踩不完的坑! 今天就来说一说我使用原生ajax请求时踩得坑: 下面是我的代码: var xmlhttp; if (window.XM ...
- 一个项目中:只能存在一个 WebMvcConfigurationSupport (添加swagger坑)
问题再现: 1.添加了swagger配置,导致接口响应的中文乱码 2.于是又添加了配置解决中文乱码的配置: 问题来了,添加了CharsetConfig 配置后swagger的配置失效了,访问404,搞 ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- 项目中踩过的坑之-sessionStorage
总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面 ...
- Go1.13 标准库的 http 包爆出重大 bug,你的项目中招了吗? 原创: 王亚楼 Go语言中文网 今天
Go1.13 标准库的 http 包爆出重大 bug,你的项目中招了吗? 原创: 王亚楼 Go语言中文网 今天
随机推荐
- 解决ideviceinstaller未安装的问题
在Mac上,使用Appium时提示: Could not initialize ideviceinstaller; make sure it is installed and works on you ...
- Ubuntu16.04 安装配置Caffe
Caffe已经是第三次安装配置了,为什么是第三次呢?因为我实在是低估了深度学习对于硬件的要求.第一次我在自己笔记本上配置的单核,CPU only ... 结果是,样例数据跑了4小时,这还怎么玩?第二 ...
- Spring中javaMail通过SMTP发送邮件
public final class Emails { /** The java mail sender. */ private static JavaMailSender javaMailSende ...
- 关于在DataGrid.RowDetailsTemplate中的控件查找不到的问题
DataGrid.RowDetailsTemplate中的控件需要显示出来才能查找,可以尝试在MouseLeftButtonUp等事件中处理.
- 给破坏性的Rake任务加把锁 | Rails
抄自这里 直接贴代码 # lib/tasks/skip_prod.rake desc 'Raises exception if used in production' task skip_prod: ...
- Mysql大范围分页优化案例
在BBS线上业务抓到如下分页SQL: meizu_bbs meizu_bbs Query Sending data , meizu_bbs meizu_bbs Query Sending data , ...
- Spring Mvc Rest为不支持DELETE/PUT的浏览器添加DELETE/PUT支持
现在都流行RESTFul,但是有一个问题,有些浏览器现在就不支持delete/put方式的请求,这些请求发出去之后都会变成get请求,导致rest接口无法被访问到.为了解决这个问题,spring提出了 ...
- 批量改名工具 Bulk Rename Utility
好用的批量改名工具 Bulk Rename Utility 功能: 这个工具既可以改文件名,也可以改目录. 使用技巧: 结合前缀4位 数字 可以让文件排列很整齐 例如: 0030 关于 ...
- PLSQL不好用,提示ora-12514 错误解决方法
我的PLSQL不好用,提示ora-12514 错误时 我分两步干的: 1:用户名,密码,不写,提示错误后,cancel登陆 tools->preference左侧选->connection ...
- angular(3)服务 --注入---自定义模块--单页面应用
ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei ...