css - -webkit-border-radius not work in Chrome Version 44.0.2403.89 m -


today, faced issue -webkit-border-radius in chrome browser version 44.0.2403.89 m.

i called border-radius first , after -webkit-border-radius called. in firefox had no issue suprised chrome has issue

not working code:

div {    width: 100px;    height: 40px;    background-color: green;    border-radius: 0px 30px;    -moz-border-radius: 0px 30px;    -webkit-border-radius: 0px 30px;  }
<div></div>

so change code call border-radius after -webkit-border-radius, works. can explain issue occur.

working code:

div {    width: 100px;    height: 40px;    background-color: green;    -moz-border-radius: 0px 30px;    -webkit-border-radius: 0px 30px;    border-radius: 0px 30px;  }
<div></div>

edit:

now use

   border-radius: 0px 30px 0px 30px;   -moz-border-radius: 0px 30px 0px 30px;   -webkit-border-radius: 0px 30px 0px 30px; 

its works. how?

div {    width: 100px;    height: 40px;    background-color: green;    border-radius: 0px 30px 0px 30px;    -moz-border-radius: 0px 30px 0px 30px;    -webkit-border-radius: 0px 30px 0px 30px;  }
<div></div>

edit:

it's bug of chrome

div {    width: 200px;    height: 200px;    margin: 1em;  }  .a {    background-color: green;    border-radius: 0px 30px;    -moz-border-radius: 0px 30px;    -webkit-border-radius: 0px 30px;  }  .b {    background-color: green;    -moz-border-radius: 0px 30px;    -webkit-border-radius: 0px 30px;    border-radius: 0px 30px;  }  .c {    background-color: green;    border-radius: 0px 30px 0px 30px;    -moz-border-radius: 0px 30px 0px 30px;    -webkit-border-radius: 0px 30px 0px 30px;  }  .d {    background-color: green;    border-radius: 0px 30px;    -moz-border-radius: 0px 30px;    -webkit-border-radius: 0px 30px;  }  .e {    background-color: green;    -moz-border-radius: 0px 30px 0px 30px;    -webkit-border-radius: 0px 30px 0px 30px;  }
<div class="a">    background-color: green;    <br />border-radius: 0px 30px;    <br />-moz-border-radius: 0px 30px;    <br />-webkit-border-radius: 0px 30px;    <br />  </div>  <div class="b">    background-color: green;    <br />-moz-border-radius: 0px 30px;    <br />-webkit-border-radius: 0px 30px;    <br />border-radius: 0px 30px;    <br />  </div>  <div class="c">    background-color: green;    <br />border-radius: 0px 30px 0px 30px;    <br />-moz-border-radius: 0px 30px 0px 30px;    <br />-webkit-border-radius: 0px 30px 0px 30px;    <br />  </div>  <div class="d">    background-color: green;    <br />border-radius: 0px 30px;    <br />-moz-border-radius: 0px 30px;    <br />-webkit-border-radius: 0px 30px;    <br />  </div>  <div class="e">    background-color: green;    <br />-moz-border-radius: 0px 30px 0px 30px;    <br />-webkit-border-radius: 0px 30px 0px 30px;    <br />  </div>

the unprefixed version should always last in order.

in fact, chrome has been unprefixed border-radiussince @ least v31.

source: caniuse.com

what think happened?

chrome choked on prefixed border-radius property didn't understand ignored it. what's interesting didn't fall version did understand...which first statement comes play.

the advice has been...unprefixed last.


Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -