From e178f9c40f35dc05ca3d79015b25545fa9f4b658 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Thu, 20 Feb 2014 10:56:18 +0100
Subject: [PATCH] [ticket/218] Correctly animate clock in IE8

This should make sure that the correct background positions are used for
animating the clock in IE8.

B3P-218
---
 .../template/portal/modules/portal_clock.js          | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/styles/prosilver/template/portal/modules/portal_clock.js b/styles/prosilver/template/portal/modules/portal_clock.js
index 2bc60d82..9aa8aab4 100644
--- a/styles/prosilver/template/portal/modules/portal_clock.js
+++ b/styles/prosilver/template/portal/modules/portal_clock.js
@@ -69,7 +69,7 @@ phpbb.b3pFlipClock = function(identifierUp, identifierDown, val, type) {
 
 	// Workaround for Internet Explorer bug
 	if (backPosition === undefined) {
-		backPosition = $(backIdUp).css('background-position-x') + ' ' + $(backIdUp).css('background-position-y');
+		backPosition = $(identifierDown).css('background-position-x') + ' ' + $(identifierDown).css('background-position-y');
 	}
 
 	backPositionLength = backPosition.length;
@@ -99,6 +99,7 @@ phpbb.b3pFlipClock = function(identifierUp, identifierDown, val, type) {
 		return;
 	}
 
+	// Animate the top number flipping
 	$(identifierUp).animate({
 			height: '0px',
 			'margin-top': '21px'
@@ -107,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'