在Mozilla中缩放元素无法正常工作

当我在应用程序中按下图标时，我试图创建一个效果（颜色圆形的底色在半秒钟内消失）;所以基本上我使用：活动伪类，并使图标上方的跨度更大和更圆，并同时使图标缩小两倍（以抵消效果）。我在Chrome和IE上运行得很好，但不知何故Mozilla在主动转换结束时缩小了图标（仅仅一会儿）。我怎么能消除这一点？在Mozilla中缩放元素无法正常工作

.collapse-btn { 
    position: absolute; 
    bottom: 9; 
    right: 16; 
    background: $white; 
    border: none; 
    border-radius: 50%; 
    -moz-transition: background-color .5s linear; 
    -webkit-transition: background-color linear; 
    transition: background-color .5s linear; 

    &:active{ 
    -moz-transform: scale(2,2); 
    -webkit-transform: scale(2,2); 
    transform: scale(2,2); 
    background-color: #c7c7c7; 

    svg { 
     -moz-transform-origin: center center; 
     -webkit-transform: scale(0.5,0.5); 
     transform: scale(0.5,0.5); 
     -moz-transform: scale(0.5,0.5); 
    } 
} 
}

来源

2017-02-20 ArtanisAce

提供更多的代码，例如html，css，javascript。代码段将不胜感激。 –

添加了用于组件@VilasKumkar的React代码:) – ArtanisAce

解决了！这是一个很大的黑客攻击，但作品......如果SVG类是“图标”：

svg.icon { 
     -moz-transform: scale(1,1) 
}

不知何故，变换CSS属性不会在同一时间在树的每一个级别应用，所以制作了一招像重新缩放到底可以解决问题。

来源

2017-02-21 11:45:16 ArtanisAce

在Mozilla中缩放元素无法正常工作

回答

相关问题