CODEWITHSUNDEEP
jquerycssjquery-mobile
Alex Neigher
Alex Neigher

Reputation: 907

Image Rendering Artifact issue jQuery Mobile

I have a button on a page which looks like:

<a href="#follow-popup" data-position-to="window" data-rel="popup">
  <button class="ui-btn-right" data-theme="c" ></button>
</a>

which renders just fine on the page, however, when I try to apply a background image and background color gradient to it via CSS:

.ui-btn-right{
    top:10px !important;
    right:11px !important;
    border-radius:4px;
    height:35px;
    width:35px;
    box-shadow:0 0 2px #d9d9d9;
    background: #ffffff; /* Old browsers */
    background-image: url("star-img.png"); /* fallback */
    background-image: url("star-img.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd)); /* Saf4+, Chrome */
    background-image: url("star-img.png"), -webkit-linear-gradient(top, #ffffff 0%,#dddddd 100%); /* Chrome 10+, Saf5.1+ */
    background-image: url("star-img.png"),    -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%); /* FF3.6+ */
    background-image: url("http://clients.gooddogdesign.com/indiegogo-mobile/star-img.png"),     -ms-linear-gradient(top, #ffffff 0%,#dddddd 100%); /* IE10 */
    background-image: url("star-img.png"),      -o-linear-gradient(top, #ffffff 0%,#dddddd 100%); /* Opera 11.10+ */
    background-image: url("star-img.png"),         linear-gradient(to bottom, #ffffff 0%,#dddddd 100%); /* W3C */
    background-position:center;
    background-repeat:no-repeat;

}

I get a button which has the gradient and the star icon like it should, however there is a strange image artifact rendered just below and slightly right of the actual image (see attached).

Any thoughts?

enter image description here

Upvotes: 1

Views: 244

Answers (1)

Gajotres
Gajotres

Reputation: 57309

This will solve your problem:

.ui-btn-hidden {
    opacity: 0 !important;
}

Working example: http://jsfiddle.net/Gajotres/PMrDn/34/

Upvotes: 1

Related Questions