Animated Icons Box not working in Internet Explorer

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 9 replies, 7 voices, and was last updated 10 years by Swift Ideas – Ed.

Viewing 10 posts - 1 through 10 (of 10 total)

Back to forum

Posted in: Dante
January 26, 2014 at 7:24 pm #44780

Guillem
Member

Post count: 1

Hi,

As you can see at http://dante.swiftideas.net/shortcodes/icon-boxes/, Animated Icon Boxes section, when you hover the icon the only effect you get in Internet Explorer is a kind of mirror effect of the information in the face of the icon.
That’s just in Internet Explorer, in Chrome all seems to work OK.

Since I plan to put this Animated Icons Box in the site I’m building (www.peopleh2o.es), would you please provide help.

Thank you.

Guillem

January 28, 2014 at 9:04 am #45199

Tahir – SUPPORT
Member

Post count: 1212

Hi,

IE does not support CSS3 transitions therefore it wont work on it. Its not a bug just a browser limitation.

Thanks
Tahir

January 28, 2014 at 3:56 pm #45342

jmaskell
Member

Post count: 29

Good afternoon Tahir,

I am encountering the same problem – is there no work around to change the effect that causes the transition? If there is any alternative CSS that could be used would this correctly display the important information on the flip side of the animated icon box?

Thanks,

– Tom

January 29, 2014 at 10:16 am #45530

Tahir – SUPPORT
Member

Post count: 1212

Hi,
I am sure we can investigate into it for future updates. Thanks for your feedback.

Best,
Tahir

January 30, 2014 at 3:42 am #45674

Swift Ideas – Ed
Keymaster

Post count: 15264

Hi guys,

Can you let me know what Windows / Browser version you are using to see this issue, and I’ll check it out!

Thanks,

– Ed

February 2, 2014 at 6:43 pm #46281

Guillem
Member

Post count: 1

I’ve just checked out with 2 setups : Windows 8.1 / IE 11.0.9600.16476 and Windows Vista / IE10.
The boxes won’t flip like they do in Chrome or Firefox.

Bug or not, I think this is a shortcoming. I cannot sell a site built with this animation, sincemy customers do not have to know about CSS transitions, they just want everything to behave well in no matter which browser.

Thank you.

Guillem

February 6, 2014 at 8:17 am #47033

Melanie – SUPPORT
Member

Post count: 11032

Hi, I assume you would have checked our demo prior to purchasing? Anyhow, I’m sure Ed will think of a solution 🙂

February 13, 2014 at 8:10 pm #48808
k_grinder
Member

Post count: 4
I’m having the same issue, Obviously, because this is a browsers limitation issue. However, it is a shortcoming and when you read the compatibility list on themeforest and it says it’s IE compatible, I assume I don’t have to go check it on every browser that it is compatible.

Anyway, that said I love the theme and it’s functions. I wanted to point out that in Opera the CSS3 transition does not work either. However, it has an acceptable degradation by showing the relevant content on the “flip” side. Is there a way to force a degradation on IE that shows the “relevant” side, which can be assumed to be the “flipped” side?

Is there a way to make this work? From this article: http://davidwalsh.name/css-flip
```
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
	transform-style: preserve-3d;
}
	/*  UPDATED! flip the pane when hovered */
	.flip-container:hover .back {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front {
	    transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(-180deg);
}

/* 
	Some vertical flip updates 
*/
.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container:hover .back {
	    transform: rotateX(0deg);
	}

	.vertical.flip-container:hover .front {
	    transform: rotateX(180deg);
	}
```
February 18, 2014 at 7:17 am #49811

anton123
Member

Post count: 67

Hi,

I’m having the same problem in Safari 5.1. – the boxes don’t animate correctly: They don’t reveal the contents of the box, only the front icon and heading flips horizontally so you can’t read the heading?

Please let me know since you can’t use elements like these if they don’t display for all browsers.

Thanks for the help

February 18, 2014 at 11:11 am #49930

Swift Ideas – Ed
Keymaster

Post count: 15264

Hey @k_grinder,

What version of Dante are you running? We fixed this quite recently as far as we are aware?

@anton123 – Safari v5.1 is a known buggy browser, and used by less than 0.8% of users.

We provide the option of fancy CSS3 animations incase you want to provide it to the masses, but in the case you want to maximise compatibility, then I would suggest choosing another icon box style.

Hope that helps.

– Ed
Back to forum

Posted in: Dante