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和踩过的坑的更多相关文章

  1. 项目中容易出现的BUG预警

    之前没有记录BUG的习惯导致在同一个坑里边栽了好几次,于是将最近几个项目中遇到的问题整理一下,在进行新项目时预警一遍: 使用携带有搜索功能的分页查询时,注意当用户更改了查询条件但没有点击查询按钮直接点 ...

  2. 使用vue开发项目需要注意的问题和可能踩到的坑

    最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下: 一.生命钩子使用需要注意的地方 1.beforeCreat ...

  3. angular6项目中使用echarts图表的方法(有一个坑,引用报错)

    1.安装相关依赖(采用的webpack) npm install ecahrts --save npm install ngx-echarts --save 2.angular.json 配置echa ...

  4. vue中异步请求渲染问题(swiper不轮播)(在开发过程中遇到过什么问题、踩过的坑)

    问题描述: 用vue封装一个swiper组件的时候,发现轮播图不能轮播了. 原因: 异步请求的时间远大于生命周期执行的时间,mounted初始化DOM时数据未返回,渲染数据是空数组,导致轮播图的容器层 ...

  5. 使用Ajax中get请求发送Token时踩的那些坑

    在使用惯了各种牛X的插件以后,在使用原生组件写一些小东西的时候总是有踩不完的坑! 今天就来说一说我使用原生ajax请求时踩得坑: 下面是我的代码: var xmlhttp; if (window.XM ...

  6. 一个项目中:只能存在一个 WebMvcConfigurationSupport (添加swagger坑)

    问题再现: 1.添加了swagger配置,导致接口响应的中文乱码 2.于是又添加了配置解决中文乱码的配置: 问题来了,添加了CharsetConfig 配置后swagger的配置失效了,访问404,搞 ...

  7. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  8. 项目中踩过的坑之-sessionStorage

    总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面 ...

  9. Go1.13 标准库的 http 包爆出重大 bug,你的项目中招了吗? 原创: 王亚楼 Go语言中文网 今天

    Go1.13 标准库的 http 包爆出重大 bug,你的项目中招了吗? 原创: 王亚楼 Go语言中文网 今天

随机推荐

  1. 解决ideviceinstaller未安装的问题

    在Mac上,使用Appium时提示: Could not initialize ideviceinstaller; make sure it is installed and works on you ...

  2. Ubuntu16.04 安装配置Caffe

    Caffe已经是第三次安装配置了,为什么是第三次呢?因为我实在是低估了深度学习对于硬件的要求.第一次我在自己笔记本上配置的单核,CPU only ...  结果是,样例数据跑了4小时,这还怎么玩?第二 ...

  3. Spring中javaMail通过SMTP发送邮件

    public final class Emails { /** The java mail sender. */ private static JavaMailSender javaMailSende ...

  4. 关于在DataGrid.RowDetailsTemplate中的控件查找不到的问题

    DataGrid.RowDetailsTemplate中的控件需要显示出来才能查找,可以尝试在MouseLeftButtonUp等事件中处理.

  5. 给破坏性的Rake任务加把锁 | Rails

    抄自这里 直接贴代码 # lib/tasks/skip_prod.rake desc 'Raises exception if used in production' task skip_prod: ...

  6. Mysql大范围分页优化案例

    在BBS线上业务抓到如下分页SQL: meizu_bbs meizu_bbs Query Sending data , meizu_bbs meizu_bbs Query Sending data , ...

  7. Spring Mvc Rest为不支持DELETE/PUT的浏览器添加DELETE/PUT支持

    现在都流行RESTFul,但是有一个问题,有些浏览器现在就不支持delete/put方式的请求,这些请求发出去之后都会变成get请求,导致rest接口无法被访问到.为了解决这个问题,spring提出了 ...

  8. 批量改名工具 Bulk Rename Utility

    好用的批量改名工具 Bulk Rename Utility 功能: 这个工具既可以改文件名,也可以改目录. 使用技巧: 结合前缀4位 数字 可以让文件排列很整齐 例如:         0030 关于 ...

  9. PLSQL不好用,提示ora-12514 错误解决方法

    我的PLSQL不好用,提示ora-12514 错误时 我分两步干的: 1:用户名,密码,不写,提示错误后,cancel登陆 tools->preference左侧选->connection ...

  10. angular(3)服务 --注入---自定义模块--单页面应用

    ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei ...