I have problem with displaying round edges in Android browser (in Samsung Galaxy Tab). However, it works fine in IOS browser (in iPad and iPhone i.e, Safari). As shown in the following image
Link to the image Round corner display problem in Android browser
Below is the code
<!DOCTYPE html>
<html>
<head>
<title>Sample App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=false">
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="javascript/cordova-1.8.0.js"></script>
<script type="text/javascript" src="javascript/precache.js"></script>
<script type="text/javascript" src="javascript/common.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="c" id="front">
<div data-theme="b" id="search-container">
<form id="search-field" action="" method="get" data-ajax="false">
<input type="search" name="search" value="" />
</form>
</div>
</div><!-- /page -->
</body>
</html>
I am not sure if I have to override the default jQuery Mobile styling. If so can anyone let me know the configuration I have to override or if there is any other solution to overcome this issue.
However, this works fine when the input field is in focus, as shown here Round corners display properly when the field is in focus
When I do a view page source in browser, this is the code (for div block)
<div id="search-top">
<form id="search-field" action="" method="get" data-ajax="false">
<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-b" style="border-radius: 1em;">
<input type="text" data-type="search" name="search" value="" class="ui-input-text ui-body-b">
<a href="#" class="ui-input-clear ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext ui-input-clear-hidden" title="clear text" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="delete" data-iconpos="notext" data-theme="b" data-mini="false">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">clear text</span>
<span class="ui-icon ui-icon-delete ui-icon-shadow"> </span>
</span>
</a>
</div>
</form>
</div>
Thanks in advance
