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. Kindle DXG和Win10 64bits无法连接的问题

    直入主题:换根数据线. 不要觉得答案简单,我就是不负责任的在调侃. 在得出这条答案之前,我的思路是,既然插上线以后,kindle的充电指示灯会亮,那就应该不是线的问题. 所以实际的过程是我安装了驱动之 ...

  2. 【转】Java出现No enclosing instance of type E is accessible. Must qualify the allocation with an enclosing

    最近在看Java,在编译写书上一个例子时,由于书上的代码只有一部分,于是就自己补了一个内部类.结果编译时出现:No enclosing instance of type E is accessible ...

  3. [转]Linux命令的返回值

    Linux命令的返回值 对于某些监测脚本和探测命令蛮有用的: 在 Linux 下,不管你是启动一个桌面程序也好,还是在控制台下运行命令,所有的程序在结束时,都会返回一个数字值,这个值叫做返回值,或者称 ...

  4. LINUX中如何查看某个进程打开的网络链接有多少

    使用lsof命令,比如查看sshd这个程序的网络连接使用命令 lsof -i | grep ^sshd

  5. BPF and eBPF linux

    http://www.brendangregg.com/blog/2016-10-21/linux-efficient-profiler.html http://www.brendangregg.co ...

  6. myeclipse编译、输出

    在项目上点右键:run--run configuration, 选择左边的“compile GWT Application”,新建一个编译配置,然后选右下角的run.

  7. 警告:隐式声明与内建函数'exit'不兼容解决方案

    警告:隐式声明与内建函数'exit'不兼容解决方案 #include <stdio.h> int main() { printf("hello world!/n"); ...

  8. Winfrom 开发小技能

    1.放弃进度条.动态进度图片等方式实现用户体验优化方式(主要是优化用户等待体验),建议使用方式? 答:对于From或者Control而言,其提供了Cursor属性设置即可. 例如: this.Curs ...

  9. SQL语句之备份表

    SELECT INTO 语句:表示从一个表中选取数据,然后把数据插入另一个表中,常用来备份一张表 1.全表结构备份: SELECT * INTO new_table_name FROM old_tab ...

  10. Redis 连接问题

    .NET 中使用 StackExchange.Redis 我为什么想写这个,总感觉很多介绍相应技术的博客,只是把内容从官网搬到自己的博客中,没有任何的实践,这样会给想学的人,没有任何好处,也可能我是自 ...