示例:

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的更多相关文章

  1. transition、animation在macbook air上图片动画边缘抖动

    示例: BUG描述: 最近同事一项目中,产品提出在macbook air上,列表图片放大效果边缘出现抖动现象.在retina屏上没有此问题. 调试过程: 1.单独把结构分离.确定是否由其他元素引起. ...

  2. Macbook air 上打开cocoscreator出错

    Error: EROFS: read-only file system, open '/Volumes/Cocos Creator/CocosCreator.app/Contents/Resource ...

  3. 2014款Macbook Air安装单独X64 Win7系统

    之所以写出来,是因为网上大多是用BootCamp安装双系统的,安装单独Win7的教程少之又少,然后大多数还写得不清不楚,所以折腾了一阵子.其实装好之后,还是觉得挺简单的. 我主要参考了两篇文章,链接如 ...

  4. 苹果Macbook Air怎么安装Win7系统图解教程

    下面开始我们在苹果Macbook Air上的Windows7之旅吧.

  5. MacBook Air装Windows7双系统后的一些(未尝试)想法

    转载请标注原地址:https://www.cnblogs.com/lixiaojing/p/11458477.html 运行环境: macOS在Mojave下的Boot Camp Assistant只 ...

  6. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  7. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

  8. 纯CSS打造银色MacBook Air(完整版)

    上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...

  9. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

随机推荐

  1. 低性能3张图片轮播React组件

    import React from 'react'; import {getSwipeWay} from '../utils/swipe'; class Carousel extends React. ...

  2. Git学习——创建本地仓库、提交文件

    创建Git仓库 新建或找一个存在的文件夹,在命令行进入该文件夹,输入命令 git init 添加文件到Git仓库 首先使用命令git add <file>,可以多次添加文件: 使用命令gi ...

  3. Controller View 模式

    参考:https://blog.andrewray.me/the-reactjs-controller-view-pattern/ Flux参考:http://www.cnblogs.com/hell ...

  4. 绑定用户id,用户权限认证

    上面这个就是为了把user_id与文章关联起来 文章需要跟用户关联,所以要去文章模型中加以关联 这样就可以直接在模板中进行关联处理 权限认证 首先要创建policy php artisan make: ...

  5. Python9- 生成器函数进阶-day14

    生成器进阶#send的获取下一个值的效果和next基本一致,#只不过在获取下一个值的时候,给上一个值的位置穿第一个数据 使用send的注册事项: #第一次使用生成器的时候,必须用next获取下一个值 ...

  6. Virtualbox虚拟机相关

    Virtualbox虚拟机相关 Virtualbox是我一直使用的虚拟机,由于需要一些测试环境等,会经常使用多个虚拟机.经常捣腾.之前有涉及到一些virtualbox方面的问题的处理,并没有记录下来, ...

  7. 四、harbor实践之初识harbor

    1 什么是Harbor harbor是VMware公司开源的企业级Registry项目,其的目标是帮助用户迅速搭建一个企业级的Docker registry 服务. 2 什么是Registry Reg ...

  8. HDU 5016 Mart Master II

    Mart Master II Time Limit: 6000ms Memory Limit: 65536KB This problem will be judged on HDU. Original ...

  9. Codeforces Round #415 (Div. 2) 翻车啦

    A. Straight «A» time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  10. 【Go】错误处理

    · error类型是一个接口类型,也是一个Go语言的内建类型.在这个接口类型的声明中只包含了一个方法Error.这个方法不接受任何参数,但是会返回一个string类型的结果.它的作用是返回错误信息的字 ...