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)
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
Post a Comment