Calendar Not Rendered Correctly In Chrome

My page uses the FullCalendar jQuery plugin to shows a monthly event calendar. If events occur on the same day, a very small space is left between them when the calendar is viewed

Solution 1:

Fixed

Strangely, the layout problem was caused by this CSS rule

a {
        -webkit-transition: all 0.15s ease-out 0s!important;
        -moz-transition: all 0.15s ease-out 0s!important;
        -o-transition: all 0.15s ease-out 0s!important;
        transition: all 0.15s ease-out 0s!important;
    }

I changed it to:

a {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

and the problem is resolved

Solution 2:

One thing is for certain, it somehow involves whatever is setting the code for the inline top positioning on the wrapping a element. Both Firefox and Chrome are setting the first element to top: 52px but the second element is being placed differently, with Firefox setting it to top: 95px and Chrome to top: 137px.

This top positioning difference is likely because of the height difference being set on the div nested inside the div with class fc-day-content. The height of that div is 170px in Chrome, but 65px in Firefox. Now, the items in question are actually overlaid onto the fc-day-content structure, they are not direct children of it. But apparently the code must read the height of that structure somehow to calculate where to place the items in relation to the "day" they are overlaying. So the taller height of the div inside fc-day-content in Chrome may be affecting it (or the reverse, the placement of the a is affecting the height of the fc-day-content nesting).

I've not yet tracked down the code that is placing those items positions.

Solution 3:

The plugin calculates the position of the calendar-event wrong. I would suggest initializing the calender on load event instead of ready. So replace the

$(document).ready(function() {.....

part with

$(window).load(function() {.....

and see if any progress.

Additional feedback would be helpful in the research, BR.

Solution 4:

You should try using relative positioning: for a elements like so

position: relative;
width: 195px;
margin-top: 30px;
float: left;