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

For example, when I hover the first div, this means changing bg color, and color changes, But it shines when the color is changing and it is not quite smooth on chrome but it is actually smooth in IE and Firefox ... why is it so? (This is just to know me) CSS:

  .bg {status: absolute; Top: 0; Left: 0; Bottom: 0; Correct: 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: vardana, geneva, non-serif; Margin-left: 20%; Border: Solid 5px # 000; Threshold width: 0 4px 5px 0; Border-radius: 5px; Border color: transparent #ddd # 999 transparent; Background clip: padding-box; Text-align: center; Z-index: -5; } .DIV A: Hover {boundary width: 0 2px 3px 0; Margin-right: 4px; Status: Relative; Left: 2px; Top: 3px; } .DIVOne: Hover ~. BG {background color: # A2D 700; Infection: all 0.5 s; } .DIV Two {Color: #FFF; Background color: # FF8000; Height: 300%; Line-height: 200%; Width: 20%; Margin Top: 10px; Padding: 0 20px; Font-size: 300%; Font-family: vardana, geneva, non-serif; Margin-left: 20%; Border: Solid 5px # 000; Threshold width: 0 4px 5px 0; Border-radius: 5px; Border color: transparent #ddd # 999 transparent; Background clip: padding-box; Text-align: center; Z-index: -6; } .DIV Two: Hover {boundary width: 0 2px 3px 0; Margin-right: 4px; Status: Relative; Left: 2px; Top: 3px; } .DIV Two: Hover ~. BG {background color: # FF 8000; } .DIVThree {color: #FFF; Background color: # 0080FF; Height: 300%; Line-height: 200%; Width: 20%; Margin Top: 10px; Padding: 0 20px; Font-size: 300%; Font-family: vardana, geneva, non-serif; Margin-left: 20%; Border: Solid 5px # 000; Threshold width: 0 4px 5px 0; Border-radius: 5px; Border color: transparent #ddd # 999 transparent; Background clip: padding-box; Text-align: center; Z-index: -6; } .DIV Three: Circle {boundary width: 0 2px 3px 0; Margin-right: 4px; Status: Relative; Left: 2px; Top: 3px; } .DIV Third: hover ~. BG {background color: # 0080ff; }   
 HTML:  
  & lt; Div class = "DIVOne" & gt; Content & lt; / Div & gt; & Lt; Div class = "DIVTwo" & gt; Content & lt; / Div & gt; & Lt; Div class = "DIVThree" & gt; Content & lt; / Div & gt;   
 Demo:   
 
 
 The problem is with the following code  
  .DIV one: hover {border width: 0 2px 3px 0; Margin-right: 4px; Status: Relative; Left: 2px; Top: 3px; }   
 This  position: relative;  Try to remove the property that is causing a problem on Chrome. Also, I do not know why you have introduced it in the first place. It starts working properly without it.  
 < Code> .DIV One: hover {border width: 0 2px 3px 0; Margin-right: 4px; // Condition: Relative; Left: 2px; Top: 3px; }