html - Background-clip not working in my code. (Border-Radius/Background bleeding issue) -


i'm trying style default progressbar skin of jquery-ui. unfortunately i've discovered issue known "background bleeding". apparently solution problem use:

-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;

however not seem work me, no matter put it. :(

image of background bleeding issue (zoomed)

enter image description here

source:

$(function() {      var myprogressbar = $("#myprogressbar");      myprogressbar.progressbar({                  value: 50      });  });
#myprogressbar {      width: 580px;      height: 92px;      border: none;      /* black background */      background-color: black;      background-image: linear-gradient(rgba(255, 255, 255, 0.25) 50%, transparent 50%, transparent);  }    #myprogressbar .ui-widget-header {      /* orange foreground */      background-color: orange;      background-image: linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);  }
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css"/>  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>    <div id="myprogressbar"></div>

here workaround: set smaller border-radius inner rectangle (orange bar), hide blurry leaking part of parents (black background) rounded border. i'll mark question solved workaround enough purpose. sadly issue remains bug/flaw in css.

edit: alright, have wait 2 days before can close it. please don't delete again.


Comments

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

Round ImageView Android -

How can I utilize Yahoo Weather API in android -