Firefox 非常丑陋抖动模糊 css3 过渡(动画)
Firefox very ugly jittered blurred css3 transition (animation)
目前我正在创建一个网站,我想使用 "new" css3 动画。很难描述我做了什么,所以我做了一个关于这个问题的小例子。当您将鼠标悬停在块上时,firefox 中的动画非常难看。此外,背景图像抖动 1px。字体变得模糊,徽标也变得模糊。在 IE11 中,Chrome 一切正常:)
这是 link:https://jsfiddle.net/0gk3fhnv/ 或完整代码:
<ul id="parallelogram-box">
<li class="parallelogram">
<div class="text">Very nice descr Text! And here sec Row...</div>
<div class="logo"></div>
</li>
</ul>
.
body {
background: #eee;
}
#parallelogram-box {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
text-align: center;
}
#parallelogram-box li {
text-align: left;
position: relative;
list-style-type: none;
display: inline-block;
min-height: 400px;
min-width: 200px;
max-width: 200px;
transform: skew(-15deg);
-o-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
margin: 20px;
overflow: hidden;
border-radius: 5%;
backface-visibility: hidden;
}
#parallelogram-box li:hover .text {
bottom: 0px;
transition: bottom 0.2s ease-in 0s;
-webkit-transition: bottom 0.2s ease-in 0s;
-moz-transition: bottom 0.2s ease-in 0s;
-o-transition: bottom 0.2s ease-in 0s;
}
#parallelogram-box li:hover {
transform: skew(-15deg);
-o-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
}
#parallelogram-box li:before {
content: "";
position: absolute;
width:200%;
height:200%;
z-index: -1;
transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-o-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-webkit-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
}
li.parallelogram:before {
background: url(http://i65.photobucket.com/albums/h235/Ignwar/Album%20Mountains/AlaskanMonoliths.jpg);
background-position: -1000px -200px;
}
#parallelogram-box p {
font-size: 20px;
text-align: center;
}
#parallelogram-box li > * {
transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-o-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-webkit-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
}
.text {
background: rgba(36,36,36,.9);
color: #e9e9e9;
position: absolute;
bottom: -75px;
height: 100px;
width: 180px;
z-index: 1;
font-size: 14pt;
margin-left: -12px;
text-align: center;
padding: 10px 25px 10px 25px;
transition: bottom 0.1s ease-in 0s;
-webkit-transition: bottom 0.1s ease-in 0s;
-moz-transition: bottom 0.1s ease-in 0s;
-o-transition: bottom 0.1s ease-in 0s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.logo {
position: absolute;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
}
.parallelogram .logo {
background: url(http://www.findthatlogo.com/wp-content/uploads/2011/10/dallas-mavericks-logo.png) no-repeat;
background-size: contain;
background-position: 50% 50%;
}
你能告诉我,是什么导致了这种奇怪的行为吗?有解决办法吗?
我找到了解决办法!
看看https://jsfiddle.net/0gk3fhnv/5/
@-moz-document url-prefix() {
#parallelogram-box li:after {
content: "";
position: absolute;
width:200%;
height:200%;
z-index: -1;
transform: none !important;
}
li.parallelogram:after {
background-image: url(for_firefox_skewed_picure.png);
}
}
我将 firefox 的过渡持续时间更改为 0.01 秒,并使用线性动画来模糊模糊的文本。此外,我在上面添加了 css 代码,这为 Firefox 添加了一个例外。该代码消除了背景图像的倾斜。因此,您必须为 Firefox 添加自定义背景图像,并在 Photoshop 或其他照片编辑软件中根据您的百分比调整它。
目前我正在创建一个网站,我想使用 "new" css3 动画。很难描述我做了什么,所以我做了一个关于这个问题的小例子。当您将鼠标悬停在块上时,firefox 中的动画非常难看。此外,背景图像抖动 1px。字体变得模糊,徽标也变得模糊。在 IE11 中,Chrome 一切正常:) 这是 link:https://jsfiddle.net/0gk3fhnv/ 或完整代码:
<ul id="parallelogram-box">
<li class="parallelogram">
<div class="text">Very nice descr Text! And here sec Row...</div>
<div class="logo"></div>
</li>
</ul>
.
body {
background: #eee;
}
#parallelogram-box {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
text-align: center;
}
#parallelogram-box li {
text-align: left;
position: relative;
list-style-type: none;
display: inline-block;
min-height: 400px;
min-width: 200px;
max-width: 200px;
transform: skew(-15deg);
-o-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
margin: 20px;
overflow: hidden;
border-radius: 5%;
backface-visibility: hidden;
}
#parallelogram-box li:hover .text {
bottom: 0px;
transition: bottom 0.2s ease-in 0s;
-webkit-transition: bottom 0.2s ease-in 0s;
-moz-transition: bottom 0.2s ease-in 0s;
-o-transition: bottom 0.2s ease-in 0s;
}
#parallelogram-box li:hover {
transform: skew(-15deg);
-o-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
}
#parallelogram-box li:before {
content: "";
position: absolute;
width:200%;
height:200%;
z-index: -1;
transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-o-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-webkit-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
}
li.parallelogram:before {
background: url(http://i65.photobucket.com/albums/h235/Ignwar/Album%20Mountains/AlaskanMonoliths.jpg);
background-position: -1000px -200px;
}
#parallelogram-box p {
font-size: 20px;
text-align: center;
}
#parallelogram-box li > * {
transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-o-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
-webkit-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
}
.text {
background: rgba(36,36,36,.9);
color: #e9e9e9;
position: absolute;
bottom: -75px;
height: 100px;
width: 180px;
z-index: 1;
font-size: 14pt;
margin-left: -12px;
text-align: center;
padding: 10px 25px 10px 25px;
transition: bottom 0.1s ease-in 0s;
-webkit-transition: bottom 0.1s ease-in 0s;
-moz-transition: bottom 0.1s ease-in 0s;
-o-transition: bottom 0.1s ease-in 0s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.logo {
position: absolute;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
}
.parallelogram .logo {
background: url(http://www.findthatlogo.com/wp-content/uploads/2011/10/dallas-mavericks-logo.png) no-repeat;
background-size: contain;
background-position: 50% 50%;
}
你能告诉我,是什么导致了这种奇怪的行为吗?有解决办法吗?
我找到了解决办法! 看看https://jsfiddle.net/0gk3fhnv/5/
@-moz-document url-prefix() {
#parallelogram-box li:after {
content: "";
position: absolute;
width:200%;
height:200%;
z-index: -1;
transform: none !important;
}
li.parallelogram:after {
background-image: url(for_firefox_skewed_picure.png);
}
}
我将 firefox 的过渡持续时间更改为 0.01 秒,并使用线性动画来模糊模糊的文本。此外,我在上面添加了 css 代码,这为 Firefox 添加了一个例外。该代码消除了背景图像的倾斜。因此,您必须为 Firefox 添加自定义背景图像,并在 Photoshop 或其他照片编辑软件中根据您的百分比调整它。