Merge pull request #222 from marc1706/ticket/218

[ticket/218] Fix undefined background-position in IE 8/9

styles/prosilver/template/portal/modules/portal_clock.js

@@ -20,9 +20,16 @@ phpbb.b3pFlipClock = function(identifierUp, identifierDown, val, type) {
 	var backIdUp = identifierUp.replace('-front-', '-back-');
 	var backIdDown = identifierDown.replace('-front-', '-back-');
 	var backPosition = $(backIdUp).css('background-position');
-	var backPositionLength = backPosition.length;
+	var backPositionLength;
 	var backY;
 
+	// Workaround for Internet Explorer bug
+	if (backPosition === undefined) {
+		backPosition = $(backIdUp).css('background-position-x') + ' ' + $(backIdUp).css('background-position-y');
+	}
+
+	backPositionLength = backPosition.length;
+
 	if (backPosition.substring(backPositionLength - 3, backPositionLength - 2) === '0') {
 		backY = '0px';
 	} else {
@@ -59,6 +66,12 @@ phpbb.b3pFlipClock = function(identifierUp, identifierDown, val, type) {
 
 	// now get the vertical offset of the bottom digit
 	backPosition = $(identifierDown).css('background-position');
+
+	// Workaround for Internet Explorer bug
+	if (backPosition === undefined) {
+		backPosition = $(identifierDown).css('background-position-x') + ' ' + $(identifierDown).css('background-position-y');
+	}
+
 	backPositionLength = backPosition.length;
 
 	if (backPosition.substring(backPositionLength - 3, backPositionLength - 2) === '0') {
@@ -86,6 +99,7 @@ phpbb.b3pFlipClock = function(identifierUp, identifierDown, val, type) {
 		return;
 	}
 
+	// Animate the top number flipping
 	$(identifierUp).animate({
 			height: '0px',
 			'margin-top': '21px'
@@ -94,13 +108,20 @@ phpbb.b3pFlipClock = function(identifierUp, identifierDown, val, type) {
 			'duration': 150,
 			defaultEasing: 'easeInOutSine',
 			'complete': function(){
+				// Now animate the bottom number flipping
 				$(identifierDown).animate(
 					{height: '20px'},
 					{
 						'duration': 150,
 						defaultEasing: 'easeInOutSine',
 						'complete': function(){
-							$(backIdDown).css('background-position', $(identifierDown).css('background-position'));
+							// For compatibility with IE8
+							if ($(identifierDown).css('background-position') !== undefined) {
+								$(backIdDown).css('background-position', $(identifierDown).css('background-position'));
+							} else {
+								$(backIdDown).css('background-position-x', $(identifierDown).css('background-position-x'));
+								$(backIdDown).css('background-position-y', $(identifierDown).css('background-position-y'));
+							}
 							$(identifierDown).css({
 								'visibility': 'hidden',
 								'display': 'inline-block'

styles/prosilver/theme/portal.css

@@ -133,8 +133,8 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
 /* RTL language fixes */
 .rtl .portal-navigation ul li a{
 	background-image: url("./images/portal/arrowbullet_rtl.gif");
-	background-position: center right; /*custom bullet list image*/
-	padding-right: 19px; /*link text is indented 19px*/
+	background-position: center right; /* custom bullet list image */
+	padding-right: 19px; /* link text is indented 19px */
 }
 
 /* Portal clock
@@ -143,6 +143,8 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
 	text-align: center;
 	min-height: 5em;
 	margin: 0 10%;
+	/* set a fixed height to get rid of the trembling clock in IE9 */
+	height: 50px;
 }
 
 .portal-clock {
@@ -304,3 +306,9 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
 	display: inline-block;
 	margin: 21px 0 0 0;
 }
+
+@media all\0 {
+	.portal-clock-back-hours-down, .portal-clock-front-hours-down {
+		margin-left: -1px;
+	}
+}

styles/subsilver2/template/portal/modules/portal_clock.js

@@ -20,9 +20,16 @@ phpbb.b3pFlipClock = function(identifierUp, identifierDown, val, type) {
 	var backIdUp = identifierUp.replace('-front-', '-back-');
 	var backIdDown = identifierDown.replace('-front-', '-back-');
 	var backPosition = $(backIdUp).css('background-position');
-	var backPositionLength = backPosition.length;
+	var backPositionLength;
 	var backY;
 
+	// Workaround for Internet Explorer bug
+	if (backPosition === undefined) {
+		backPosition = $(backIdUp).css('background-position-x') + ' ' + $(backIdUp).css('background-position-y');
+	}
+
+	backPositionLength = backPosition.length;
+
 	if (backPosition.substring(backPositionLength - 3, backPositionLength - 2) === '0') {
 		backY = '0px';
 	} else {
@@ -59,6 +66,12 @@ phpbb.b3pFlipClock = function(identifierUp, identifierDown, val, type) {
 
 	// now get the vertical offset of the bottom digit
 	backPosition = $(identifierDown).css('background-position');
+
+	// Workaround for Internet Explorer bug
+	if (backPosition === undefined) {
+		backPosition = $(identifierDown).css('background-position-x') + ' ' + $(identifierDown).css('background-position-y');
+	}
+
 	backPositionLength = backPosition.length;
 
 	if (backPosition.substring(backPositionLength - 3, backPositionLength - 2) === '0') {
@@ -86,6 +99,7 @@ phpbb.b3pFlipClock = function(identifierUp, identifierDown, val, type) {
 		return;
 	}
 
+	// Animate the top number flipping
 	$(identifierUp).animate({
 			height: '0px',
 			'margin-top': '21px'
@@ -94,13 +108,20 @@ phpbb.b3pFlipClock = function(identifierUp, identifierDown, val, type) {
 			'duration': 150,
 			defaultEasing: 'easeInOutSine',
 			'complete': function(){
+				// Now animate the bottom number flipping
 				$(identifierDown).animate(
 					{height: '20px'},
 					{
 						'duration': 150,
 						defaultEasing: 'easeInOutSine',
 						'complete': function(){
-							$(backIdDown).css('background-position', $(identifierDown).css('background-position'));
+							// For compatibility with IE8
+							if ($(identifierDown).css('background-position') !== undefined) {
+								$(backIdDown).css('background-position', $(identifierDown).css('background-position'));
+							} else {
+								$(backIdDown).css('background-position-x', $(identifierDown).css('background-position-x'));
+								$(backIdDown).css('background-position-y', $(identifierDown).css('background-position-y'));
+							}
 							$(identifierDown).css({
 								'visibility': 'hidden',
 								'display': 'inline-block'

styles/subsilver2/theme/portal.css

@@ -153,3 +153,9 @@
 	display: inline-block;
 	margin: 21px 0 0 0;
 }
+
+@media all\0 {
+	#portal-clock-back-hours-down, #portal-clock-front-hours-down {
+		margin-left: -1px;
+	}
+}