Why doesn't Chrome render this page as smooth as IE? - css

Question

When I hover the first div for example, it is meant to change the bg color, and the color changes but it flashes when changing the color and it's not smooth at all in Chrome. but it is really smooth in IE and Firefox ... Why is that? (that's all I want to know)
CSS:
.bg {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
height:100%;
background-color:#D8D8D8;
z-index:-10;
}
.DIVOne {
color:#FFF;
margin-top:10%;
background-color:#A2D700;
height:300%;
line-height:200%;
width:20%;
padding:0 20px;
font-size:300%;
font-family:Verdana, Geneva, sans-serif;
margin-left:20%;
border: solid 5px #000;
border-width:0 4px 5px 0;
border-radius:5px;
border-color:transparent #ddd #999 transparent;
background-clip:padding-box;
text-align:center;
z-index:-5;
}
.DIVOne:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
.DIVOne:hover ~ .bg {
background-color:#A2D700;
transition:all 0.5s;
}
.DIVTwo {
color:#FFF;
background-color:#FF8000;
height:300%;
line-height:200%;
width:20%;
margin-top:10px;
padding:0 20px;
font-size:300%;
font-family:Verdana, Geneva, sans-serif;
margin-left:20%;
border: solid 5px #000;
border-width:0 4px 5px 0;
border-radius:5px;
border-color:transparent #ddd #999 transparent;
background-clip:padding-box;
text-align:center;
z-index:-6;
}
.DIVTwo:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
.DIVTwo:hover ~ .bg {
background-color:#FF8000;
}
.DIVThree {
color:#FFF;
background-color:#0080FF;
height:300%;
line-height:200%;
width:20%;
margin-top:10px;
padding:0 20px;
font-size:300%;
font-family:Verdana, Geneva, sans-serif;
margin-left:20%;
border: solid 5px #000;
border-width:0 4px 5px 0;
border-radius:5px;
border-color:transparent #ddd #999 transparent;
background-clip:padding-box;
text-align:center;
z-index:-6;
}
.DIVThree:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
.DIVThree:hover ~ .bg {
background-color:#0080FF;
}
HTML:
<div class="DIVOne"> Content </div>
<div class="DIVTwo"> Content </div>
<div class="DIVThree"> Content </div>
demo: http://www.jsfiddle.net/aryanf/w7unZ/

Answer 1

The problem is with the following code
.DIVOne:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
It's the position:relative; property that is causing the problem on Chrome. Try removing it. Besides, I don't see why you have introduced it in the first place. It seems to work fine without it.
.DIVOne:hover {
border-width:0 2px 3px 0;
margin-right:4px;
//position:relative;
left:2px;
top:3px;
}

Answer 2

If it is not rendering and appearing smooth on other browsers, try to add some css code additionaly inside your CSS file.
Suppose if you need Rounded Corner Border in IE, you will use
.ddlStyle {
border-radius: 4px;
height: 22px;
width: auto;
max-width: 300px;
min-width: 120px;
padding: 0 0 0px 0px;
padding-right: 4px;
font-family: Calibri,Verdana, Tahoma, 'Segoe UI';
}
But this may not render perfect on all other Browser due to different behavior of Rendering Engine. So make addition of some lines and try on other browsers.
.ddlStyle {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
height: 22px;
width: auto;
max-width: 300px;
min-width: 120px;
padding: 0 0 0px 0px;
padding-right: 4px;
font-family: Calibri,Verdana, Tahoma, 'Segoe UI';
}
Hope, it solves the problem.