Transform-duration не работает в Safari, но работает в Chrome

.cl-effect-10 a::before { 
    position: absolute; 
    display: inline-block; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    height: 40px; 
    width: 10px; 
    background:#00BFFF; 
    color: #ddd; 
    content: attr(data-hover); 
    -webkit-transition-property: width; 
    -webkit-transition-duration: 2s; 
    -webkit-transform: skew(-45deg, 0); 
    -moz-transform: skew(-45deg, 0); 
    -ms-transform: skew(-45deg, 0); 
    transform: skew(-45deg, 0); 
} 
.cl-effect-10 a:hover::before,.cl-effect-10 a:focus::before { 
    width: 100%; 
}

Transform-duration не работает в Safari, но работает в Chrome. Я хотел бы попросить вас о помощи.Transform-duration не работает в Safari, но работает в Chrome

Заранее спасибо.

источник

2016-04-27 彭夹子

Какую версию Safari вы тестируете? Как вы можете сказать, что это просто свойство «продолжительность перехода», которое не применяется, а не все «свойства перехода»? – Shaggy

My Safair - это версия 5.1.7, вы правы, это вопрос версии. это ваше продвижение! –

До версии 6.1, Safari не поддерживает transition на ::before и ::after псевдо-элементов (source) так, если вы проверяете в старой версии, чем та, что будет объяснить вашу проблему.

Кстати, используя CSS, предоставленный в вашем вопросе, ваши переходы будут работать только в Chrome & Safari, поскольку вы используете только префиксную версию свойств -webkit-. Почти все браузеры (за одним исключением), которые поддерживают переходы CSS, теперь поддерживают их, и в течение некоторого времени не нуждаются в каких-либо префиксах. Однако, если вам необходимо обеспечить поддержку старых браузеров, используйте таблицы caniuse.com, чтобы определить, какие префиксы вам могут понадобиться.

источник

2016-04-27 10:04:26 Shaggy

Transform-duration не работает в Safari, но работает в Chrome

ответ

Смежные вопросы