Chrome Version 58.0.3000.4 dev (64-bit) CSS rendering issue - css

Question

I noticed a strange problem on Latest Chrome Version 58.0.3000.4 dev (64-bit) My website is broken on Latest chrome DEV (Version 58.0.3000.4)[on MacOS] if you have latest chrome please check this URL http://openspeedtest.com/Get-widget.php
As you can see the buttons and animation Not rendering as expected. But working as expected on all other browser.
.example {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);
}#ostui{
background-color: white;
height: 700px;
width: 730px;
}
#min_speed, #max_speed {
display:block;
width:auto;
margin-top:auto;
position:absolute;
top:208px;
z-index:4;
color:#35393c;
font-weight:700
}
#min_speed {
float:left;
left:63px
}
#max_speed {
right:63px;
float:right
}
#speedometer {
width:719px;
height:268px;
overflow:hidden;
margin-bottom: 5px;
margin-top: 60px;
background-color: #E5E6E7;
display:none;
}
#speedometer #inside_central {
top:18px;
left:3px;
position:relative;
width:257px;
height:257px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#speedometer #surface_plate {
border-bottom-style: solid !important;
border-bottom-width: 10px !important;
border-color: #FFFFFF;
position:relative;
top:-257px;
z-index:2;
margin-left:auto;
margin-right:auto
}
#inside_central #direction_sign {
margin-left:auto;
margin-right:auto;
position:relative;
top:50px;
left:0;
width:40px;
height:43px;
z-index:3;
overflow:hidden
}
#one_ink_visible {
position:absolute;
width:257px;
height:257px;
overflow:hidden;
top:7px;
-webkit-transform:rotate(74deg);
-moz-transform:rotate(74deg);
-o-transform:rotate(74deg);
-ms-transform:rotate(74deg)
}
#speedometer #inside_left, #speedometer #inside_right {
position:relative;
top:80px;
width:200px;
height:222px;
text-align:center
}
#speedometer #inside_left {
left:25px;
float:left
}
#speedometer #inside_right {
left:0;
float:right;
margin-right:20px
}
.side_ink {
background:url('http://get.openspeedtest.com/images/side-blue-ink.png');
position:absolute;
top:-43px;
left:0;
width:200px;
height:222px;
z-index:1
}
#inside_right .side_ink {
display:none
}
#inside_left .side_ink {
display:none
}
img#ink_segments {
left:0;
z-index:1;
position:relative
}
#direction_sign {
display:none
}
#direction_sign img {
left:0;
top:-43px;
position:relative;
z-index:3
}
.digital_speed {
font-family: 'Open Sans', Arial, sans-serif;
font-size:45px;
font-weight:400;
z-index:3;
position:relative
}
#digital_speed_current {
top:105px;
text-align:center;
width:100%;
position:absolute
}
#digital_speed_down, #digital_speed_up {
top:45px;
position:absolute;
width:100%;
text-align:center
}
.speed_caption {
font-family: 'Arial', sans-serif;
font-size:13px;
z-index:3;
position:relative
}
#speed_caption_current {
top:159px;
display:none;
position:absolute;
text-align:center;
width:100%;
font-weight:700
}
#speed_caption_down, #speed_caption_up {
position:absolute;
top:99px;
width:100%;
text-align:center;
display:none;
font-weight:700
}
/************************/
#speedometer_container{
display:block;
}
#speedometer_controller{
width: 719px;
height:100px;
overflow:hidden;
display:block;
}
#progress_bar {
margin-left:auto;
margin-right:auto;
position:relative;
width:606px;
height:73px;
background:url('http://get.openspeedtest.com/images/horizontal-progress-bar.png') no-repeat top center;
display:none;
z-index:4
}
#progress_text, #ping_result {
font-weight:700;
left:170px;
top:35px;
position:relative;
font-size:12px;
height:20px;
text-align:left;
display:inline;
margin-right:20px
}
#progress_bar_indicator {
font-weight:700;
top:16px;
left:521px;
background:#198bd9;
width:14px;
height:14px;
border-radius:50%;
position:absolute
}
#start_button_wrapper {
margin-left:auto;
margin-right: 20px;
height:auto;
left:8px;
text-align:center;
display:none;
position:relative;
z-index:4;
}
input.formatted_button {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
padding: 8px 20px;
background: -webkit-gradient(
linear, left top, left bottom,
from(#28adf0),
to(#117acf));
background: -o-linear-gradient(top, #28adf0, #117acf);
border-radius: 3px;
border: 1px solid #4887c7;
box-shadow:
1px 1px 0px rgba(000,000,000,0.2),
inset 0px 1px 1px rgba(255,255,255,0.2);
text-shadow:
0px 1px 1px rgba(000,000,000,0.3),
0px 1px 0px rgba(255,255,255,0.3);
margin-bottom:10px;
outline:none;
}
input.formatted_button:hover {
border-top-color: #1090e6;
}
input.formatted_button:active {
top:2px;
position:relative;
border-top-color: #1090e6;
background: #117acf;
}
input.formatted_button_bw {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #303030;
padding: 7px 20px;
background: -webkit-gradient(
linear, left top, left bottom,
from(#f7f7f9),
to(#e0e4e8));
background: -o-linear-gradient(top, #f7f7f9, #e0e4e8);
border-radius: 4px;
border: 1px solid #b8b8b8;
box-shadow:
0px 1px 0px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.3);
text-shadow:
0px 1px 1px rgba(255,255,255,1);
}
input.formatted_button_bw:hover {
border-top-color: #e0e4e8;
background: #e0e4e8;
}
input.formatted_button_bw:active {
top:2px;
position:relative;
border-top-color: #e0e4e8;
background: #e0e4e8;
}
#ip_container {
font-family: 'PT Sans',sans-serif;
font-size: 18px;
font-weight: 700;
margin-top: 10px;
}
#ip_address {
font-weight: 300;
}
#chart_container{
width:490px;
height:60px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
margin-top:-17px;
top:17px;
left:-10px;
position:relative;
}
.spinner {
width: 120px;
height: 120px;
margin: 100px auto;
background-color: #44A8FC;
border-radius: 100%;
-webkit-animation: scaleout .5s infinite ease-in-out;
animation: scaleout .5s infinite ease-in-out;
}
#-webkit-keyframes scaleout {
0% { -webkit-transform: scale(0.0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
#keyframes scaleout {
0% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 100% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
opacity: 0;
}
}

Answer 1

That was a bug on Latest chrome Dev. I reported the same https://bugs.chromium.org/p/chromium/issues/detail?id=689369