Chrome crashing error
How to fix Chrome transition
on error :hover
? Some :hover
usually and then don't work. Maybe I need a jQuery solution?
I will give an example, is there still such an error when transition
:
.item {
background: rgba(106, 204, 201, 1);
background: -moz-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(106, 204, 201, 1)), color-stop(100%, rgba(109, 177, 244, 1)));
background: -webkit-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
background: -o-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
background: -ms-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
background: linear-gradient(to bottom, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6accc9', endColorstr='#6db1f4', GradientType=0);
width: 300px;
height: 150px;
display: inline-block;
position: relative;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: opacity;
transition-property: opacity;
}
.item:hover {
opacity: 0.5;
transition: opacity 1s;
}
.title {
position: absolute;
top: 20%;
-webkit-transition: -webkit-transform 1s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out;
-o-transition: -o-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translate(0, 0);
}
.item:hover .title {
transform: translate(0, -20px);
-webkit-transform: translate(0, -20px);
-o-transform: translate(0, -20px);
-moz-transform: translate(0, -20px);
}
<div class="item">
<div class="title">title1</div>
</div>
<div class="item">
<div class="title">title2</div>
</div>
+3
source to share
1 answer
Try this :
.item {
background: rgba(106, 204, 201, 1);
background: -moz-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(106, 204, 201, 1)), color-stop(100%, rgba(109, 177, 244, 1)));
background: -webkit-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
background: -o-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
background: -ms-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
background: linear-gradient(to bottom, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6accc9', endColorstr='#6db1f4', GradientType=0);
width: 300px;
height: 150px;
display: inline-block;
position: relative;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.item:hover {
opacity: 0.5;
transition: opacity 1s;
}
.title {
position: absolute;
top: 20%;
-webkit-transition: -webkit-transform 1s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out;
-o-transition: -o-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.item:hover .title {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
}
<div class="item">
<div class="title">title1</div>
</div>
<div class="item">
<div class="title">title2</div>
</div>
Don't see any bugs in the latest Chrome (version 44.0.2403.130) on OS X 10.10.4 and Windows 8.1.
+1
source to share