Icon Box – Help on IE CSS3 Fallback

[gravitymarketing]

Hello,

My client loves your design, and so i do i, great work.

My client really has their heart set on the Icon Box (CSS3 flip animation) functionality which isnt supported up to IE8 as with the other features on the web site.

To try and respect your time, i did my diligence and searched first. here are two previous replies on this issue:

http://support.swiftideas.net/forums/topic/ie-internet-explorer-icon-box-not-working/
http://support.swiftideas.net/forums/topic/icon-box-on-mobile/

After searching I cant see any posts that cover it in more detail or provide the fallback solution.

Regarding the second post, the icon-box-on-mobile… did you end up prebuilding any fallback for this already? It was mentioned but not provided. Obviously as mentioned its not required for mobile but the point still stands for IE.

Solution could be simple… CSS show/hide, anything. I guess one approach would be to add a custom div above each flipbox container and then do something like jquery.append into a new div container with your own rules, while removing the original container… as an IE specific rule.

I was just hoping there may already be a swiftideas solution which is better than something I am capable of.

All the best in making awesome themes in the future.

Kind Regards

Jeremy

[gravitymarketing]

Sorry for the double post, replied 2 mins later.

Scratch my solution it may intefere with the swift page builder. Refined idea is that I would probably want to modify the DOM with jquery and just addClass/removeClass or something i guess. Then you have a new event that can fire on hover state.

Thoughts?

[Tahir – SUPPORT]

Hi,
Ed might be better able to share his thoughts on this. He will take a look shortly.

Thanks
Tahir

[Swift Ideas – Ed]

Hi Jeremy,

I could provide an IE fallback that shows the flip side as standard, with no hover event. Maybe not the fanciest solution, but would mean that no information is left hidden.

Let me know.

– Ed

[bjorngils]

For me that last suggestion woud be a option!

[Swift Ideas – Ed]

Try this custom css:

.no-csstransforms3d .sf-icon-box-animated .back {
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-o-backface-visibility: visible;
	backface-visibility: visible;
}

That should sort it for you. I’ve tested it here on IE8 and works as expected.

– Ed