Issue: I am currently in the process of developing a PhoneGap/Cordova app for both iOS and Android using jQuery Mobile. To incorporate a calendar feature into my app, I decided to create my own rather than use existing plugins due to not finding any that met all my requirements. My calendar consists of seven divs, each representing a day of the week, with each set to float:left and width:14.28571428571429% to make up 1/7 of 100% width. The container div for the calendar is set to width: 100%. When inspecting with Chrome developer tools, it confirms that the container (id="calendar") is utilizing 100% of the available width.
Problem Statement: Although everything appears fine on desktop view, an issue arises when testing the app on iPhone or iPad devices - a small margin (approximately 2%) appears on the right side of the calendar layout.
Further Investigation: Research led me to discover that this problem may be attributed to subpixel rendering. I came across information about Subpixel Rendering on WikiPedia and also stumbled upon an article from CSS-Tricks discussing how different browsers handle fractions of pixels, particularly in WebKit based browsers like mobile Safari. It seems that a fraction of the calculated width, around 0.28%, is being truncated by the browser, leading to the extra margin. Despite efforts, I haven't been able to find a viable solution to address this issue.
Sample Code Snippet:
<div id="calendar">
<div class="cal-week">
<a href="javascript:monthPrev();">
<div class="day day-inactive">28</div>
</a>
[additional day divs go here...]
</div>
[more content within the calendar]
</div><!-- /calendar -->