Question

Setup: I am developing a PhoneGap/Cordova app for iOS and Android using jQuery Mobile. The app requires a calendar which I am creating myself due to the fact that an exhaustive search of plugins didn’t yield any results that satisfied all my needs. I am using seven div’s – one for each day of the week – which are all float:left‘d and each is set to width:14.28571428571429% as this is 1/7 of 100%. I should mention that the calendar div container is set to width: 100%. Chrome developer tools also confirms that the container (id=”calendar”) is using 100% of the width real estate.

Problem: Everything looks and works great on the desktop, however once I start testing on my iPhone or iPad, a small margin (about 2%) appears to the right of the calendar.

Supporting Details: I have done quite a bit of research on this, and it appears that this is due to subpixel rendering. I read about Subpixel Rendering on WikiPedia and found this two year old article regarding the way different browsers handle fractions of pixels. It seems to me that 0.28[…]% is being chopped off in mobile Safari.
The problem is, I don’t know how to fix it. What confuses me even further, is that this appears to be a webkit issue, but the calendar renders just fine in desktop Chrome.

Code:

<div id="calendar">

    <div class="cal-week"> 

        <a href="javascript:monthPrev();">
            <div class="day day-inactive">28</div>
        </a>

        <a href="javascript:monthPrev();">
            <div class="day day-inactive">29</div>
        </a>

        <a href="javascript:monthPrev();">
            <div class="day day-inactive">30</div>
        </a>

        <a href="javascript:monthPrev();">
            <div class="day day-inactive">31</div>
        </a>

        <a href="javascript:selectDate(11,01,2012);">
            <div class="day">1</div>
        </a>

        <a href="javascript:selectDate(11,02,2012);">
            <div class="day">2</div>
        </a>

        <a href="javascript:selectDate(11,03,2012);">
            <div class="day">3</div>
        </a>

        <div class="clearfix"></div>
            <!-- fun fact: this is the first week of November, 2012 -->

    </div>

[&hellip;]

</div><!-- /calendar -->

Answer 1

For anyone who stumbles on this:

After much (painful) searching through Webkit documentation, improper SubPixel handling is a well documented bug and needs to be fixed to make these types of issues go away permanently. The only sure work-around I can find is a negative pixel margin fix. This qusetion goes into some good detail on the matter.

In regards to my particular issue with seven columns, a negative pixel on each of the seven columns was creating a margin on the right-hand side of the screen. What fixed me was the idea of only applying the negative margins to every other column. So now columns 0, 2, 4, and 6 all have a margin-left: -1px and the other three do not. It works for now, let’s hope they get to addressing this issue sooner rather than later.

Cheers.