CSS3 过渡(供应商前缀)立即使 Safari 崩溃

CSS3 Transition ( Vendor Prefixes) crashes Safari immediately(CSS3 过渡(供应商前缀)立即使 Safari 崩溃)
本文介绍了CSS3 过渡(供应商前缀)立即使 Safari 崩溃的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

这是我正在进行的项目(代码完全复制,除了名称更改等)

Here is the project I'm working on (code copied exactly except for names changed, etc.)

https://c9.io/schwigri/strange-crash/workspace/index.html

div #logo 的样式如下:

The div #logo has the style:

#logo {
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}

这会导致 OS X 10.8.5 上的 Safari 6.0.5 立即崩溃.如果我删除这些转换,它不会崩溃.

This causes an immediate crash in Safari 6.0.5 on OS X 10.8.5. If I remove these transitions it doesn't crash.

我该如何解决这个问题?

How can I resolve this issue?

推荐答案

Safari 有时会在 all-属性转换方面遇到一些问题.

Safari has some trouble sometimes with all-property transitions.

试试这个:

#logo {
    -webkit-transition: color .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}

玩了一会儿,其实是你使用 -webkit-transition: all-webkit-calc() 导致问题.这是 Safari 中的一个错误,为了克服它,您可能需要使用 javascript 来计算您的上边距而不是 CSS.

After playing around with it some more, it's actually the combination of your usage of -webkit-transition: all and -webkit-calc() that's causing the problem. This is a bug in Safari, and in order to overcome it, you may need to use javascript to calculate your top margin instead of CSS.

希望这会有所帮助!

这篇关于CSS3 过渡(供应商前缀)立即使 Safari 崩溃的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

How to test @media print with protractor or selenium?(如何用量角器或硒测试@media print?)
Geolocation not working on Safari 5.x on Windows 7/XP(地理定位在 Windows 7/XP 上的 Safari 5.x 上不起作用)
Problems with Page Cache in iOS 5 Safari when navigating back / unload event not fired(导航返回/未触发事件时 iOS 5 Safari 中的页面缓存问题)
Finding shadow DOM text with Selenium and CSS(使用 Selenium 和 CSS 查找阴影 DOM 文本)
Formatting a number as currency using CSS(使用 CSS 将数字格式化为货币)
Failed to create shader cache entry- error while locating an element by its Css selector(通过 Css 选择器定位元素时无法创建着色器缓存条目 - 错误)