【问题标题】:CSS3 transform scale display judderCSS3变换比例显示抖动
【发布时间】:2014-10-19 11:05:13
【问题描述】:

我有以下问题: 当我使用变换比例悬停时,图像显示抖动。

这是我的代码:

<div class="item">
</div>

.item {
    background: transparent url("http://s14.directupload.net/images/141019/s3r8avxj.jpg") no-repeat 0 0 / 176px 176px; 
    width: 176px;
    height: 176px;
    display: inline-block;
    font-family: Arial;
    margin: 0px 10px 10px 0px;
    border: 5px solid #fff;
    -webkit-box-shadow: 0 0 2px 1px rgba(0,0,0,0.4);
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.4); 
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.item:hover {
    transform: scale(1.05);
    border: 5px solid #fff;
    cursor: default;
}

全屏视图:http://jsfiddle.net/excsa15w/embedded/result/

代码:http://jsfiddle.net/excsa15w/

是否有可能消除判断?

提前致谢

【问题讨论】:

    标签: css transform scale


    【解决方案1】:

    更改属性

    background: transparent url("http://s14.directupload.net/images/141019/s3r8avxj.jpg") no-repeat 0 0 / 176px 176px; 
    

    收件人

    background: transparent url("http://s14.directupload.net/images/141019/s3r8avxj.jpg") no-repeat; 
    

    jsfiddle

    【讨论】:

    • 如果你想用容器调整背景,调整源图像的大小
    • 它仍然在判断您的解决方案!当鼠标快速悬停在左上角时,图像会“跳跃”。 1 px 并返回....这是我不想要的
    • 好吧,认为是Firefox的问题。尝试用 Firefox 打开你的 jsfiddle,你会明白我的意思。
    • 我的解决方案我认为这不是问题
    • 它仍然一样,但只是在 firefox (v33.0) 中
    猜你喜欢
    • 2012-08-22
    • 1970-01-01
    • 2012-03-01
    • 2015-02-17
    • 2014-03-07
    • 1970-01-01
    • 2015-02-20
    • 2017-01-28
    • 1970-01-01
    相关资源
    最近更新 更多