CSS transform got foobarred in IE (looks great in Chrome/Safari/FF)

HTML & CSS
1

At some point, my slider layout became foobarred in IE. I can’t pinpoint the problem.

Check this page in IE (any version) > http://canvas2.clickbump.com

Then check it in Chrome or FF to see how its supposed to look. The vertical spines that display the slide titles have somehow gotten foo-barred in IE. Anyone see the problem?


/*slider css*/
.easy-accordion h2{margin:0px 0 20px 0;padding:0;font-size:1.6em;}
.easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0}
.easy-accordion dt,.easy-accordion dd{margin:0;padding:0}
.easy-accordion dt,.easy-accordion dd{position:absolute}
.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -ms-transform: rotate(0deg); /* Opera */ -o-transform: rotate(-90deg);transform: rotate(-90deg);cursor:pointer;}
.easy-accordion dd{z-index:1;opacity:0;overflow:hidden}
.easy-accordion dd.active{opacity:1;}
.easy-accordion dd.no-more-active{z-index:2;opacity:1}
.easy-accordion dd.active{z-index:3}
.easy-accordion dd.plus{z-index:4}
.easy-accordion .slide-number{position:absolute;bottom:0;left:10px;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg);  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -ms-transform: rotate(0deg); /* Opera */ -o-transform: rotate(-90deg);transform: rotate(90deg)}
dd p{line-height:120%}
#accordion-1{height:243px;padding:0;position:relative}
#accordion-1 dl{height:243px;}
#accordion-1 dt{height:24px; line-height:24px !important;text-align:right;padding:0 10px 0 0;text-transform:uppercase;letter-spacing:1px;background:#fff; border:1px solid #ccc; color:#26526c}
#accordion-1 dt.active{cursor:pointer;color:#fff;background:#777; border:1px solid transparent; }
#accordion-1 dt.hover{color:#68889b;}
#accordion-1 dt.active.hover{color:#fff}
#accordion-1 .slide-number{color:#ddd;left:10px;}
#accordion-1 .active .slide-number{color:#fff;}
#accordion-1 a{color:#68889b}
#accordion-1 dd img{position:absolute;right:0;bottom:0}
#accordion-1 dd{padding:25px;border:1px solid #ddd;border-left:0;margin-right:-1px;background-color:#fff;}
#accordion-1 h2{font-size:2em;margin:0;}
#accordion-1 .more{padding-top:10px;display:block}
2

Works fine in IE9 for me. Looks fine in IE8, but is very slow to react to clicks.

3

Hmm, I’m testing on a Mac with Windows 8 parallels installed. I’m using the “f12 Developer” tools in IE10 to check all versions.

I suppose it could be a glitch in the emulator.

I’ll test on a spare PC I have (if I can get it booted up, LOL).

Thanks for checking it Ralph

~ s

4

Hi Scott,

The slider is badly broken in IE10 pc. You seem to have messed some of the rules up here:


.easy-accordion dt {
	-webkit-transform: rotate(-90deg); /* Firefox */
	-moz-transform: rotate(-90deg);
	-moz-transform-origin: 20px 0px;[B] /* Internet Explorer */[/B]
	-ms-transform: rotate(0deg); [B]/* Opera */[/B]
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.easy-accordion .slide-number {
	-webkit-transform: rotate(90deg); /* Firefox */
	-moz-transform: rotate(90deg);  /* Internet Explorer */
	-ms-transform: rotate(0deg); [B]/* Opera */[/B]
	-o-transform: rotate(-90deg);
	transform: rotate(90deg)
}

The items marked in bold can’t be right as you comment it as one browsers but then use the prefix of another browser.

It seems to me that IE10 needs the origin defined and moved back. Something like:


.easy-accordion dt{
-ms-transform-origin:100% 0;
-ms-transform: translateX(-100%) rotate(-90deg);
}

That may move the vertical sections into place but won’t fix the other issues I’m seeing. I’d have to build that from scratch to see where its all going wrong. It seems that other vertical accordions on the web don’t work in IE10 either.

5

Thanks for the help Paul, I’ll try your suggestion changes. I suppose the IE7-8 glitches are a result of a bug in the Windows 8 preview release I’m running on my mac.

Can I ask what’s your setup for previewing on Windows 10 and below?

Also, on your setup, does this site’s slider also have the IE10 layout issues or not?

6

Hi,

I’m running IE10 in windows7 and like you I usually use the f12 developer tools to have a quick look at older versions but about 50% of the time they are wrong so I use ietester as a back up to test. IEtester is pretty buggy and crashes a lot but does usually show the css the way it would look on the real machine. Indeed it seems to render better than users who set up multiple versions of windows as they often miss vital updates and seem to create unique versions somehow.

On ietester ie8 and ie7 are working ok (apart form minor misplacement). Ie9 and ie10 are both broken.

Also, on your setup, does this site’s slider also have the IE10 layout issues or not?

Yes that is also completely broken in the real version of IE10.

7

Paul, I’ve made some edits on this site to accomodate a workaround for IE10.

If you view that site in IE10, you should get outside arrows on IE10. You should get vertical spines on IE9, IE8, IE7

One thing that’s puzzling me is this: On IE9, the developer tools shows spines perfectly aligned in all versions of IE it displays (ie7-9). However, when I upgraded my Win 7 box to IE10, the developer tools view of IE shows spines misaligned on all versions of IE it displays (ie10 down to IE7).

However, as you predicted, the IETestor app shows spines fine in all versions ie7-9

8

Hi Scott,

Yes that seems to be working in IE10 now with the arrows outside.

I get the same results with the developer tools as you but ietester shows the pages ok. I think the problem with the developer tools is that certain things like the IE prodig filters conflict with the css in some way and corrupt the display. developer tools seems ok when you don;t have any hacks or any complicated code but once you mix in hacks and proprietary filters then it struggles ot render things correctly. There are known bugs in IE7 and 8 but when you view them via the developer tools the bugs are not evident so the rendering of the older IE versions is only a partial emulation and not the real thing.

9

Good exchange Paul. I appreciate that. IE dev tools is usually pretty accurate for me, however, I’ve not tested transforms of this complexity before now. It will definitely save some headscratching and recoding to know the idiosyncracies of the IE tools.

Maybe someday soon chrome’s dev tools can emulate IE versions so that we can code against IE in a reliable dev runtime.