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

Post a Comment

Popular posts from this blog

javascript - How to process users in one specific order using map o each function? -

-
i create cloud function process items in specific order , make network request api each item , update them result of api. i tried this. order not respected , computation of "remainingcredits" wrong. note function "getuserpageview()" make api call , return promise result. query.descending("createdat"); return query.find().then(function(items) { var remainingcredits=0; var promises= _.map(items, function(item){ var credit=item.get("credit_buy"); return getuserpageview(123, new date()).then(function(pageviews){ var usedcredit=credit-pageviews; if(remainingcredits>0) return remainingcredits+credit; if(credit-usedcredit<=0){ console.log("usedcredit:"+usedcredit); item.set("used",true); return 0; }else{ remainingc...
Read more

javascript - Linking from page A to a specific iframe on page B -

-
i'm in process of setting website showcase our photographs. for using third party supplier providing gallery: http://gallery.wisejam.com/index.html . however, in order keep visitors on our own website, have set gallery on page iframe: http://wisejam.com/gallery-2/ up here, works fine. now, cannot go further when wish deep link post/page photograph open in iframe. it works long visitor on page (gallery-2) following code... <a href="http://gallery.wisejam.com/featured/distortion-clear-waters-robert-schaelike.html" target="iframe_a">distortion</a> however, i'm trying achieve internal links display in iframe of 'gallery-2', not have send them artists' page. wish keep visitors us! i'm sorry if simple question ask i'm not professional programmer. many input , help! you write : target="iframe_a" photos go frame named : name="iframe_a" . please check . if upload full code able gi...
Read more

java - Two interface have same method name with different return type -

-
this question understanding interfaces in java. here simple example of implementing interfaces in java. interface parenta { void display(); } interface parentb { int display(); } class child implements parenta, parentb { @override public void display() { system.err.println("child parenta"); } //error : return type incompatible parentb.display() //so added method int return type @override public int display() { system.err.println("child parentb"); } } this case can happen in large java application 2 interface can have method same name. thought since return type different jvm know interface's method overriding. what best explanation this? situation make sense? thanks in advance because method same signature not allowed, confuses compiler detect exact override-equivalent method declared once. jls (§8.4.2) 2 methods or constructors, m , n, have same signature if have, ...
Read more