0

background image position is not rendering in Jelly Bean webView, but works fine in KitKat version

CSS

    .clearable{
      background:url("../images/txtclear.png") no-repeat right 5px center !important;  
      border:1px solid #999;
      padding:3px 18px 3px 4px; 
      border-radius:3px; 
      transition: background 0.4s; 
    }

HTML

<html>
<body>
<input value="" id="txtsearch" type="email" placeholder="Enter Search string" class="clearable"/>
</body>
</html>

i have also reffered to a similar post in the below URL, but this will not resolve my issue. background-attachment messes up rendering in Jelly Bean WebView?

Community
  • 1
  • 1
Prajith
  • 107
  • 2
  • 10

1 Answers1

1

background-position with four-value syntax is only supported in Android 4.4 onwards, that's why it is not rendering properly.

http://caniuse.com/#feat=css-background-offsets

For those versions you could use a fallback rule in order to display properly. Just adjust % or px to match your item width and height.

.clearable{
   background-position: 95% 50%; /* Will apply only for < 4.4 */
   background-position: right 5px center;
}

Hope this helps!

Regards

Helios
  • 156
  • 1
  • 6