IE9 is causing a bizarre problem where the entire page is suddenly jumping. It's

UPDATE: The client has requested testing to disable the click and drag feature in IE, so replicating the bug may be difficult at this time. I apologize if this hinders the community's ability to help fix the root issue.

Here's the issue: It occurs on IE9 and IE8 when the screen height, or more specifically, the browser height is less than the height of the website's main container. The website scrolls horizontally with a total height of around 700 or 800 pixels.

To replicate this bug, open the following URL: in IE9 and adjust the browser height to around 500 or 600 pixels. This will make the page start scrolling vertically from top to bottom.

Make sure you're at the top of the page where you can see the G logo, menu, and social icons. Click in the white area next to the "Our People" section without releasing the click. Then, drag your mouse to the right to initiate horizontal scrolling.

The bug manifests as follows: When the browser height is smaller than the total website height in IE9, clicking and dragging in the middle section to scroll horizontally causes the whole page to jump down vertically, aligning the top of the screen with the "#drag-wrapper" element.

The goal is to prevent this vertical jump while scrolling horizontally. Chrome and Firefox do not exhibit this bug under the same circumstances.

This issue may be related to how IE handles focused elements with specific positioning, given the heavy use of jQuery on the site.

If anyone has any insights or ideas, please share them. I've explored all possibilities I could think of.

javascriptjquerycssdebugginginternet-explorer-9

Answer №1

Consider adding the left and top properties to the CSS class below:

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

This class currently has a position:absolute declaration but lacks the left and top properties. Adjust the margins to 0 if necessary.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for acquiring an object to utilize in v-bind within a v-for loop

Consider this code snippet: <ol class="breadcrumb arr-right"> <li v-for="(url,name, index) in links" v-bind:class=" (index == (links.length -1)) ? 'breadcrumb-item active' : 'breadcrumb-item'"> <a v-bind:href ...

javascriptvue.jsvuejs2

Is there a way to change a class on an anchor element without disrupting its functionality?

The code snippet provided includes an anchor tag with classes for "window" and "less" applied. Is there a way to eliminate the anchor tag while still keeping the classes intact in the code, ensuring that the functionality remains unchanged? ...

htmlcssanchor

The jQuery Animate feature springs to life with just a single click

I'm attempting to integrate jQuery's animate feature with a bookmark ID on my website. When I first click on the link, it jumps to the bookmark ID without any animation, but if I click the same link again, the animation works as expected. var Ti ...

jqueryreactjs

Choosing a Specific Column within a CSS Grid

Currently, I am trying to figure out a method for selecting columns within a CSS grid. Through the use of the :nth-child() selector, I managed to select a column in a static grid. For instance, in a grid with 3 columns, :nth-child(2) will target every grid ...

javascriptjquerycsscss-grid

React JS Calendar

I'm currently working on a project where I need to create a calendar component using React. The design requires the days to be displayed like in the Windows calendar, starting from Sunday even if it's another month and ending with Saturday. The ...

javascriptreactjsjsx

Tips on positioning images to the left and right without causing text to wrap around them

I have successfully floated an image to the left of text with the following CSS. How can I achieve a similar effect with an image to the right of text on the same page? Do I need to use a clearfix between the left and right images? Thank you! .innercont ...

htmlcssimagecss-float

Instructions for including dependencies from a globally installed npm package into a local package

I've noticed that although I have installed a few npm packages globally, none of them are showing up in any of my package.json files. What is the recommended npm command to automatically add these dependencies to all of my package.json files? ...

javascriptnode.jsjsonnpmpackage

Preventing the dispatch function from being overwritten by an empty state

Scenario: I am currently exploring the concept of React/Redux and aiming to understand the data flow. The process involves axios dispatching actions -> reducers setting state to props -> Component rendering. As a newcomer to the Frontend world, ...

javascriptreactjsaxios

Implementing a parallax scroll effect using CSS and dynamically updating the background-position value with JavaScript

How can different Y position percentages be dynamically assigned to multiple layered background images in CSS using JavaScript so that they update as the page scrolls? <style> body { background-image: url(img/bg-pattern-01.png), ur ...

javascriptcssscrollparallax

The CSS3 Transform feature kicks in only after the window is resized in Mozilla Firefox

I have created a pure CSS3 parallax webpage by following the method outlined by Keith Clark and using a sample made by Carl Henderson (I can't provide a direct link to his codepen due to my lack of reputation). You can find the code in the main page, ...

htmlcssgoogle-chromemozillaparallax

Validating the userid with jQuery before form submission

Currently, I am working on a form where I need to validate if the userID is already in use before allowing the user to submit it. After some research, I came across a solution on another website. However, when I tried to implement the code, I encountered ...

javascriptjqueryajax

The updated values in an Angular application may not always be accurately represented by interpolated values

The values of the elements in the dropzone1 array only show the initial top and left values, not the latest ones. Within the draw() function, I add the top and left values to the topLeft array and then push it to the dropzone1 array inside the move() func ...

javascripthtmlangulartypescript

Issue with onclick event not being triggered by Javascript function inside constructor

My current challenge involves implementing a function called makeHighlight within the SmartButton constructor. The purpose of this function is to execute whenever I click on the SmartButton object, which is represented by an image element. To achieve thi ...

javascriptconstructoronclick

Discovering user activity through rooms within SocketIO

My goal is to trigger an event when a user switches between online and offline status. The challenge arises from the fact that a user may have multiple tabs open, making it ineffective to track their connection status using on('connect') and on(& ...

javascriptnode.jswebsocketsocket.io

Difficulty in adding a simple return to render an array in React for list creation

After establishing a basic object, I noticed that it contained an internal object named "orders" with an array of toppings like "Cheese" and "Bacon". To further explore this structure, I segregated the array and directed it to a function called renderToppi ...

javascriptarraysreactjs

Issues with margin and padding-top not functioning properly when using @media for printing

Is there a way to add some space between the top of my webpage and my logo? I've tried adjusting the padding in my CSS, but when I check the print preview in Chrome, no spacing is visible. Below is my HTML code: <div class="container"> < ...

htmlcssmarginpaddingspacing

Creating a personalized progress bar that reflects real-time data from an external API

I have developed an API that sends scores if someone solves math, chemistry, or physics problems correctly. The API responds with a JSON object like this: { "scores": { "maths": 28, "chemistry": 9, "physics": 26, } } When a person complet ...

javascriptreactjs

Just ran $npm install and encountered an error message: "Module '../lib/utils/unsupported.js' not found."

Returning to work on a React project after switching from the Rails environment, I encountered an issue where I am unable to run NPM commands in my Mac terminal. Despite trying various solutions I found online, none seem to be effective. The real concern i ...

javascriptnode.jsreactjsnpm

What is causing the components to not re-render after a state change in React?

I am attempting to retrieve data from the Coin Market Cap API and showcase the details in simple cards. I have experimented with various methods and included comments to document my trials. Any assistance would be greatly appreciated. This is the Parent: ...

javascriptreactjs

How can I retrieve the span html element without using a class with ajax?

Trying to work with Ajax syntax for the first time, I have this HTML code. <div class="select2-container select2" id="s2id_ServiceID-2-1" style="width: 100%;"> <a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabind ...

javascripthtmlajax