Take the 2-minute tour ×

EDIT: The client wants to do some testing with disabling the click and drag feature in IE, so at this current moment you will be unable to replicate the bug. I understand if this effects the communities ability to assist in fixing the ultimate underlying problem.

So here is the problem. It occurs in IE9 and IE8 when the screen height or more specifically the browser height is less than the height of the website main container. The website scrolls horizontally so its total height is somewhere around 700 or 800 pixels.

To reproduce this bug you have to open up this url: http://dev.gregoryfca.com/ in IE9 and make the height of the browser somewhere around 500 or 600 pixels. So this will force the page to start scrolling vertically top to bottom.

Keep it all the way to the top so you can still see the G logo and the menu as well as the social icons. Then click in the white area and dont let go. You can click in the white area next to the Our People section.

When you click start to drag your mouse to the right. This will start the page scrolling and allow you to use the horizontal scroll feature.

So here is the bug. In IE9 when the browser height is smaller than the total website height, when you click and drag in the middle section to scroll horizontally, the whole page jumps down vertically so that the absolute top of the screen is the top of the #drag-wrapper element.

I dont want the page to jump when you are scrolling horizontally. If you put together this same set of circumstances in Chrome or Firefox you will see this bug is not present there.

I think it has something to do with the way IE treats focused elements with certain positioning, or something like that. The site uses lots of jQuery as you will see.

Does anybody have any idea. I have basically exhausted everything I can think of.

share|improve this question
add comment

1 Answer

try giving left and top property to this css class:

#drag-wrapper {
  height: 610px;
  margin: 35px 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 100%;
  -moz-tap-highlight-color: rgba(0,0,0,0);
  -moz-touch-callout: none;
  -webkit-touch-callout: none;
  z-index: 4000;

As you can see this class has position:absolute but it doesn't have the left and top property. make margins to 0 if requires.

share|improve this answer
Jai, Thank you, I tried your solution but the bug is still happening. It seems that IE wants to position the #drag-wrapper element as a top:0; when it gets focused on. –  Brian Dainis Dec 21 '12 at 19:12
add comment

Your Answer


