Body overflow IE only… IE bug or did I derp?

[shaneisme]

OK… so this may or may not be complicated. I’ve been looking at it for too long, so I can’t tell.

Here is one of the offending pages: http://www.asus.com/us/site/game-on-incredible/displays/PB287Q/

In IE10 at least, there’s a horizontal overflow. I’ve narrowed it down to the specs at the bottom. It’s vertically and horizontally centered, as are many other blocks on the page.

As soon as I delete that entire section, the overflow goes away.

If I dig into the CSS and start turning off rules one at a time, I discover that IE seems to be rendering the space the element would be taking up as if the transform wasn’t in place. You can see it too, just uncheck that rule and then scroll to the right and sure enough it ends right where the overflow is.

The only problem is, I have no idea why it’s rendering like that. No element is actually there, and even the html and body tags are the viewport width.

Is this an IE bug, or did I miss something simple?

I’d like to think it’s something simple, in my local environment, when I remove that section none of the others with similar behavior cause this strange behavior.

Appreciate any help.

[nixnerd]

Dude… I just have one question: What is this ‘derp’ you speak of?

[Paulie_D]

EXCLAMATION

(also herp derp)
Used as a substitute for speech regarded as meaningless or stupid, or to comment on a foolish or stupid action:

Or..in Homer speak…Doh!

[shaneisme]

http://knowyourmeme.com/memes/derp

[nixnerd]

@shaneisme drops knowledge, then drops mic.

GIF Redacted – Hurts the eyes.

Did you figure this issue out?

[Senff]

It has to do with the translate(-50%,-50%) for .centered-block. I’m not sure if it’s a bug or if it’s just how IE does things, but the space on the page where the original location of that element is, is retained (so it kinda “reserves” space on the page where the element would be if there would be no translate).

Not sure about a fix though — normally you could work with (negative) margins instead of translates, but since the element doesn’t have a fixed width in pixels, it’ll be tricky.

[shaneisme]

There are other elements (many in fact, throughout the site) that use this same class to center horizontally and vertically with an unknown size.

None of those cause the same problem… otherwise I’d easily chalk this up to an IE bug.

[Senff]

I looked for a few of those in your site, but of the ones I found, only the one causing the problem is as wide as it is — all the other ones are not as wide. The one I pointed out is the only one that is outside its <SECTION> when it doesn’t have the -50% translate.

I only looked on the home page though.

[shaneisme]

I still haven’t figured this one out… it does seem as if IE is rendering both positions – before and after translate.

Even if I don’t have the element so wide, it’s still rending both positions. You can test that by removing the width altogether and adjusting the viewport size. This actually reveals IE is doing it for all elements with the same CSS. Apparently it’s a bug? I’ve tried using it with and without the -ms prefixes to no effect.

Ah well… IE is less than 3% of our traffic, so I’ll just focus on doing an accessibility pass :)

[ThatCat]

I recommend create an ad who says “F*** IE, USE ANOTHER BROWSER” for display to the IE users when they visit the website.

[nixnerd]

I recommend create an ad who says “F*** IE, USE ANOTHER BROWSER” for display to the IE users when they visit the website.

Pretty sure ASUS is not going to go for that.

Edit: If this were a personal project and you were flat out UNABLE to include a key feature of your site/webapp on IE… I’d be inclined to say “Provided you know your demographic, feel free to not support IE.” I’m not one to say that’s THE cardinal sin of webdev. But on a corporate project… not going to happen.

[shaneisme]

Yeah I’m fairly certain I’d be having a very serious conversation with someone, or multiple someones, if I did that.

As for ignoring IE, I’m not exactly doing that… I’m just taking a break from it. I’ll figure it out eventually – or I’ll be vindicated by a patch from MS haha

[nixnerd]

I’ll be vindicated by a patch from MS haha

The ol’ cross your fingers and wait solution huh?

[nixnerd]

It is a tad unfortunate that the #1 consumer of ASUS products are PC gamers who are probably the least likely to switch from the browser Windows comes with. Well… next to old people.

[shaneisme]

Don’t know about that, as I said for all the sites I track for North America, we’re at about 3% real IE traffic. About 80% Chrome (!!) if I include mobile. Of course most people coming to my sites these days is on either iOS or Android :)

[Author]

Posts