CSS transform Масштабирование Hover Chrome

Question

Я использую CSS transform: scale (2.0); анимировать точки внутри диаграммы. Эффект работает так, как предполагалось, в Safari, но в Chrome и, по-видимому, IE точки привязаны к зависанию.

Это не происходит в пустом документе HTML, как раз на этой диаграмме, знает ли кто-нибудь решение? или в случае неудачной замены jQuery.

Точки расположены абсолютно в пределах диаграммы

развитие находится на www.craigscott.net/succeed

благодаря

Общая карта Ссылка Стили

.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 */ 

} 

Все точки должности

.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

Я просто найти легкий путь, удалить все преобразования: масштаб головной боль и написать этот

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

Answer 2

Я хотел бы использовать рамки эффектов JQuery CSS3 как jQuery Transit обрабатывать ваше масштабирование/преобразование.

Кроме того, он обрабатывает ваши проблемы с перекрестным браузером для вас. ИМХО, он держит вещи более организованными и более простыми в обслуживании. Похоже, что вы делаете это круто, но может быстро выйти из-под контроля, если вы не будете осторожны.

Пример:

$(".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

Я знаю, что это не является точным решением вашей проблемы, но вы можете найти его легче идти по этому пути, если вы будете придерживаться твердой основы для обработки беспорядка анимации/эффектов CSS3.

Edit: Обновленный Fiddle более, как ваш пример дерева "точка":

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'); 
});