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-radius
since @ 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
Post a Comment