CSS transformer Scale Hover Chrome

Question

J'utilise CSS transformer: échelle (2.0); animer les points dans un diagramme. L'effet fonctionne comme prévu dans Safari, mais dans Chrome et apparemment IE les points sont coupés en vol stationnaire.

Cela ne se produit pas dans un document HTML vide, juste dans ce diagramme, quelqu'un connaît-il une solution? ou à défaut un substitut jQuery décent.

Les points sont positionnés tout à fait dans le diagramme

le développement est à www.craigscott.net/succeed

grâce

Plan général Lien Styles

.link-box {width:20px; height:20px; position: absolute; cursor: pointer; background-color: white; border-radius: 50%; 
-moz-transition: all 0.1s ease; -webkit-transition: all 0.1s ease; } 


.link-box:hover { -webkit-transform:scale(2.0); 

-moz-transform:scale(2.0); 
-o-transform:scale(2.0); 
transform:scale(2.0); 

transform-origin:50% 50%; 

-ms-transform-origin:50% 50%; /* IE 9 */ 
-webkit-transform-origin:50% 50%; /* Safari and Chrome */ 
-moz-transform-origin:50% 50%; /* Firefox */ 
-o-transform-origin:50% 50%; /* Opera */ 

} 

Tous les points positions

.mobile-link {bottom:100px; right:135px;} 
.mobile-link:hover {bottom:100px; right:135px;} 
.visualization-link {bottom:270px; right:70px;} 
.UEANDE-link {bottom: 165px; right:45px;} 
.support-link {top:110px; left:170px;} 
.tech-support-link {top:50px; left:265px;} 
.data-govern-link {top:108px; right:175px;} 
.payroll-link {left:135px; bottom:98px;} 
.CRM-link {left:48px; bottom:165px;} 
.HCMC-link {left:70px; top:252px;} 
.semantic-link {right:82px; top:200px;} 
.op-mod-link {right:30px; top:217px;} 
.gameification-link {right:25px; top:270px;} 
.jquery-link {right:85px; bottom:85px;} 
.portal-link {right:40px; bottom:115px;} 
.dashboard-link {right:0px; bottom:148px;} 
.alerts-link {right:10px; bottom:200px;} 
.support-pack-link {left:175px; top:57px;} 
.psoft-link {left:128px; top:82px;} 
.upgrades-link {left:130px; top:138px;} 
.tech-services-link {left:220px; top:28px;} 
.integration-link {left:265px; top:0px;} 
.saas-link {left:310px; top:28px;} 
.mdm-link {right:130px; top:83px;} 
.data-quality-link {right:177px; top:60px;} 
.screening-link {right:132px; top:136px;} 
.PSGP-link {left:85px; bottom:82px;} 
.RTI-link {left:125px; bottom:47px;} 
.PAE-link {left:175px; bottom:67px;} 
.CX-link {left:0px; bottom:147px;} 
.HR-Help-link {left:10px; top:323px;} 
.Event-link {left:62px; top:302px;} 
.dynamic-link {left:22px; top:270px;} 

.fusion-link {left:30px; top:220px;} 
.PSHCM-link {left:80px; top:205px;} 

Answer 1

Je trouve un moyen facile, enlever tout transform: maux de tête à l'échelle et écrire ce

.link-box-child:hover { 
    width:40px; 
    height:40px; 
    margin:-10px; 
    position:absolute; 
    padding:0px; 
    } 

Answer 2

Je voudrais utiliser un cadre d'effets jQuery CSS3 comme jQuery Transit pour gérer vos transformations/mise à l'échelle.

En outre, il gère vos problèmes de navigateur croisés pour vous. À mon humble avis, il maintient les choses plus organisées et plus faciles à maintenir. On dirait que ce que vous faites est cool, mais pourrait rapidement devenir incontrôlable si vous ne faites pas attention.

Exemple:

$(".box").hover(function() { 

    $('.box').transition({ scale: 2.0 }); 
    $('.box').transition({ x: '40px' }); 
}, function() { 
    $('.box').transition({ scale: 1.0 }); 
    $('.box').transition({ x: '-40px' }); 
}); 

JS Fiddle Example

Je sais que ce n'est pas une solution exacte à votre problème, mais vous pouvez trouver plus facile d'aller dans cette voie si vous vous en tenez à un cadre solide gérer le désordre des animations/effets CSS3.

Edit: Mise à jour Fiddle pour être plus comme votre exemple arbre "dot":

JS Fiddle Example 2

Javascript:

$(".link-box").hover(function() { 

    $('.link-box').transition({ scale: 2.0, x: '-40%' }, 'fast'); 
}, function() { 
    $('.link-box').transition({ scale: 1.0, x: '0px' }, 'fast'); 
});