Calendar works perfectly in firefox, fails miserably in other browsers / JSfiddle

I have made a calendar for a client’s website, and it works beautifully on Firefox: See here. But on Chrome or Safari, it doesn’t work at all, it just shows a jumbled mess.

The JSfiddle here shows the exact same problems, so this is my SSCE. I should also mention that the real code uses AJAX calls to retrieve the calendar in loadCalendar(), but those have been removed for purposes of posting.

I really don’t know what’s going on here.

Here is the code:

calendarResize = function() {
	var weeks = $('.week').length;
	var days = $('.day').length / weeks;
	var monthHeight = ((weeks / days) * $('.month').width());
	var monthWidth = $('.month').width();
	$('.month').css({ height: monthHeight });
	$('.week').css({ height: monthHeight / weeks });
	$('.day').css({ width: monthWidth / days });
	$('#calendar').css({ height: monthHeight + $('.title').height() + $('.days').height() });
};
loadCalendar = function(month, year) {
    calendarResize();
    $('.monthNav').click(function(e) {
        var navBtn = $(this);
        var params = navBtn.data('nav').split(',');
        loadCalendar(params[0], params[1]);
        e.preventDefault();
    });
};
$(document).ready(function(){
    $(window).on('resize', calendarResize);
    var today = new Date();
    loadCalendar(today.getMonth()+1, today.getFullYear());
});
.month {
	display: table;
	width: 100%;
	height: 100%;
	max-width: 700px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 18px;
}
.monthNav {
	background: transparent;
	border: none;
}
.title {
	display: table-caption;
	height: 50px;
}
.title i {
	font-size: 24px;
}
.week {
	display: table-row;
	width: 100%;
}
.days {
	display: table-row;
	width: 100%;
	height: 25px;
}
.calendar-label {
	display: table-cell;
	height: 100%;
	background-color: #471118;
	color: #F23D56;
}
.day {
	display: table-cell;
	height: 100%;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	color: #FFF;
}
.day:first-child {
	border-left: 1px solid #666;
}
.positionChildren {
	position: relative;
}
.positionChildren > .posLeft {
	position: absolute;
	top: 50%;
	left: 1%;
	transform: translate(-1%, -50%);
}
.positionChildren > .posCenter {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.positionChildren > .posRight {
	position: absolute;
	top: 50%;
	left: 99%;
	transform: translate(-99%, -50%);
}
.posCenter h1,
.posCenter h2,
.posCenter h3 {
	margin: 0px;
}
.date-past {
	background-color: #CCCCCC;
}
.date-available {
	background-color: #932332;
}
.date-unavailable {
	background-color: #CC8D8C;
}
.date-booked {
	background-color: #282828;
}
.calendar-legend {
	list-style: outside none none;
	padding: 0px;
	width: 100%;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 18px;
}
.calendar-legend li {
	display: inline-block;
	margin: 3px;
}
.calendar-legend li span {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 5px;
}
<div class="item-content">
    <div id="calendar">
        <div class="month">
            <div class="title positionChildren">
                <button class="posLeft monthNav" data-nav="06,2015"><i class="fa fa-arrow-left"></i>

                </button>	<span class="posCenter"><h3>July 2015</h3></span>

                <button class="posRight monthNav" data-nav="08,2015"><i class="fa fa-arrow-right"></i>

                </button>
            </div>
            <div class="days">
                <div class="calendar-label positionChildren"><span class="posCenter">SUN</span></div>
                <div class="calendar-label positionChildren"><span class="posCenter">MON</span></div>
                <div class="calendar-label positionChildren"><span class="posCenter">TUE</span></div>
                <div class="calendar-label positionChildren"><span class="posCenter">WED</span></div>
                <div class="calendar-label positionChildren"><span class="posCenter">THU</span></div>
                <div class="calendar-label positionChildren"><span class="posCenter">FRI</span></div>
                <div class="calendar-label positionChildren"><span class="posCenter">SAT</span></div>
            </div>
            <div class="week">
                <div class="day positionChildren date-past">	<span class="posCenter">28</span></div>
                <div class="day positionChildren date-past">	<span class="posCenter">29</span></div>
                <div class="day positionChildren date-past">	<span class="posCenter">30</span></div>
                <div class="day positionChildren date-past">	<span class="posCenter">1</span></div>
                <div class="day positionChildren date-past">	<span class="posCenter">2</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">3</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">4</span></div>
            </div>
            <div class="week">
                <div class="day positionChildren date-available">	<span class="posCenter">5</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">6</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">7</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">8</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">9</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">10</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">11</span></div>
            </div>
            <div class="week">
                <div class="day positionChildren date-available">	<span class="posCenter">12</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">13</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">14</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">15</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">16</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">17</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">18</span></div>
            </div>
            <div class="week">
                <div class="day positionChildren date-available">	<span class="posCenter">19</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">20</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">21</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">22</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">23</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">24</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">25</span></div>
            </div>
            <div class="week">
                <div class="day positionChildren date-available">	<span class="posCenter">26</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">27</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">28</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">29</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">30</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">31</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">1</span></div>
            </div>
            <div class="week">
                <div class="day positionChildren date-available">	<span class="posCenter">2</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">3</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">4</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">5</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">6</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">7</span></div>
                <div class="day positionChildren date-available">	<span class="posCenter">8</span></div>
            </div>
        </div>
    </div>
    <ul class="calendar-legend">
        <li><span class="date-available"></span>Available</li>
        <li><span class="date-unavailable"></span>Unavailable</li>
        <li><span class="date-booked"></span>Booked</li>
        <li><span class="date-past"></span>Past</li>
    </ul>
</div>


Source: cross-browser

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.