transition、animation在macbook air上图片动画边缘抖动2
示例:
BUG描述:
最近同事一项目中,产品提出在macbook air上,列表图片放大效果边缘出现抖动现象。在retina屏上没有此问题。
调试过程:
1、单独把结构分离。确定是否由其他元素引起。
2、逐步添加结构。看是否有父级结构引起。
调试结果:
1、单独分离,不出现问题。
2、添加结构的过程中,当遇到父级中包含
1
|
margin : 0 auto ; |
问题出现。
初步确定是由于此属性的原因。
使用下面代码
1
2
|
($(window).width()-1100)/2; //1100是页面宽度 121.5 |
确定原因可能是因为在普屏上0.5像素造成的。
故,把原外框样式,添加以下代码以确定是否判断正确。
1
2
|
position : relative ; left : -0.5px ; |
结果完美解决相关的问题。
但以上解决只能处理在屏幕宽度和主体宽度之差为奇数的情况,而且只在macbook air的safari浏览器,有以上BUG。
故只能用js进行处理。
最终解决方法:
代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$( function (){ var ua=navigator.userAgent; var isPCMac=ua.indexOf( 'Macintosh' )>-1; var isRetina=window.devicePixelRatio&&window.devicePixelRatio>1; function resizeWrapper(){ var wwidth=1100; //$(".wrapper").width(); var winW=$(window).width(); if (winW>wwidth){ var wleft=parseInt((winW-wwidth)/2); $( '.wrapper' ).css({margin: '0 ' +wleft+ 'px' }); } } if (isPCMac&&!isRetina){ resizeWrapper(); $(window).resize( function (){ resizeWrapper(); }) } }) |
- 导航
翻译的文章,版权归原作者所有,只用于交流与学习的目的。
原创文章,版权归作者所有,非商业转载请注明出处,并保留原文的完整链接。
transition、animation在macbook air上图片动画边缘抖动2的更多相关文章
- transition、animation在macbook air上图片动画边缘抖动
示例: BUG描述: 最近同事一项目中,产品提出在macbook air上,列表图片放大效果边缘出现抖动现象.在retina屏上没有此问题. 调试过程: 1.单独把结构分离.确定是否由其他元素引起. ...
- Macbook air 上打开cocoscreator出错
Error: EROFS: read-only file system, open '/Volumes/Cocos Creator/CocosCreator.app/Contents/Resource ...
- 2014款Macbook Air安装单独X64 Win7系统
之所以写出来,是因为网上大多是用BootCamp安装双系统的,安装单独Win7的教程少之又少,然后大多数还写得不清不楚,所以折腾了一阵子.其实装好之后,还是觉得挺简单的. 我主要参考了两篇文章,链接如 ...
- 苹果Macbook Air怎么安装Win7系统图解教程
下面开始我们在苹果Macbook Air上的Windows7之旅吧.
- MacBook Air装Windows7双系统后的一些(未尝试)想法
转载请标注原地址:https://www.cnblogs.com/lixiaojing/p/11458477.html 运行环境: macOS在Mojave下的Boot Camp Assistant只 ...
- CSS动画-transition/animation
HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...
- css3动画transition animation
CSS动画简介 transition animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...
- 纯CSS打造银色MacBook Air(完整版)
上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...
- css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
随机推荐
- 低性能3张图片轮播React组件
import React from 'react'; import {getSwipeWay} from '../utils/swipe'; class Carousel extends React. ...
- Git学习——创建本地仓库、提交文件
创建Git仓库 新建或找一个存在的文件夹,在命令行进入该文件夹,输入命令 git init 添加文件到Git仓库 首先使用命令git add <file>,可以多次添加文件: 使用命令gi ...
- Controller View 模式
参考:https://blog.andrewray.me/the-reactjs-controller-view-pattern/ Flux参考:http://www.cnblogs.com/hell ...
- 绑定用户id,用户权限认证
上面这个就是为了把user_id与文章关联起来 文章需要跟用户关联,所以要去文章模型中加以关联 这样就可以直接在模板中进行关联处理 权限认证 首先要创建policy php artisan make: ...
- Python9- 生成器函数进阶-day14
生成器进阶#send的获取下一个值的效果和next基本一致,#只不过在获取下一个值的时候,给上一个值的位置穿第一个数据 使用send的注册事项: #第一次使用生成器的时候,必须用next获取下一个值 ...
- Virtualbox虚拟机相关
Virtualbox虚拟机相关 Virtualbox是我一直使用的虚拟机,由于需要一些测试环境等,会经常使用多个虚拟机.经常捣腾.之前有涉及到一些virtualbox方面的问题的处理,并没有记录下来, ...
- 四、harbor实践之初识harbor
1 什么是Harbor harbor是VMware公司开源的企业级Registry项目,其的目标是帮助用户迅速搭建一个企业级的Docker registry 服务. 2 什么是Registry Reg ...
- HDU 5016 Mart Master II
Mart Master II Time Limit: 6000ms Memory Limit: 65536KB This problem will be judged on HDU. Original ...
- Codeforces Round #415 (Div. 2) 翻车啦
A. Straight «A» time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
- 【Go】错误处理
· error类型是一个接口类型,也是一个Go语言的内建类型.在这个接口类型的声明中只包含了一个方法Error.这个方法不接受任何参数,但是会返回一个string类型的结果.它的作用是返回错误信息的字 ...