在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中縮放元素無法正常工作

回答

相關問題