The scrolling on IE9 is fragmented and uneven

Question

The scrolling on IE9 is fragmented and uneven

I am in need of creating a specific layout that consists of a fixed header bar at the top, which will house various controls. Below this header bar, there should be a large scrollable SVG area where I can place different SVG elements. This area must include headers both at the top (for a timeline) and on the left (for location names).

The main requirement is for the scrollable area to function like a data grid view with column headers at the top and row headers on the left, but instead of traditional cells, it will contain SVG or canvas elements.

For a clearer understanding of what I am aiming to achieve, please refer to this JSFiddle link (opacity has been used to visualize element behavior during scrolling):

http://jsfiddle.net/serge_s/bLy61krL/2/

Below is the HTML code snippet:

<!-- HTML content here -->

Javascript functions are also included within this implementation:

// Javascript functions here

Similarly, CSS styles have been defined to format the layout accordingly:

/* CSS styles go here */

While the layout performs well on modern browsers like Firefox and Chrome, there are issues with jittery scrolling in IE9. As I am constrained to use IE9 in a corporate setting, I seek guidance on how to optimize the layout for smooth scrolling or if a pure HTML/CSS solution is feasible. Any insights or assistance in this matter will be greatly appreciated as I continue to learn about HTML and CSS.

javascript html css

Answer 1

Answer №1

After making some adjustments to the layout and code, I have successfully fixed the compatibility issue with IE 9. If you want to see the updated JSFiddle, please click on this link

Here is the revised HTML:

<!DOCTYPE html>
<head runat="server">
  <title>Page 1</title>
</head>
<body>
    <form id="form1">
        <header id="toolbar" class="header">
            <span id="scroll"></span>
            <span>This is my header with controls</span>
        </header>

        <div id="date" class="disp_date">bla-bla</div>
        <div id="divtimes">
            <svg id="times" class="times"></svg>
        </div>
        <div id="divrooms">
            <svg id="rooms" class="rooms"></svg>
        </div>

        <div id="scrl">
            <svg id="canv"></svg>
        </div>

    </form>
</body>

<script type="text/javascript">
   $(document).ready(function () {
      myLoad();
   });
</script>

Javascript updates:

... ...

CSS changes:

body { margin:0; }

/* Styling for the header */
.header { width:100%; height: 60px; background:lightblue; position: fixed; margin:0px auto; top:0px; z-index:10; overflow:hidden; }

#scrl { overflow:scroll; position:absolute; left:150px; top:105px; }
...
...</answer1>
<exanswer1><div class="answer" id="34135299" lang="3.0" cat="1449485799" uid="U2VyZ2V5IFNldmFzdHlhbm92">
<p>I have made necessary modifications in the layout and code, and now it works perfectly fine even on IE 9. Click on <a href="http://jsfiddle.net/serge_s/3LjgspLm/6/" rel="nofollow">this link</a> to access the updated JSFiddle.</p>

<p>HTML:</p>

<pre><code><!DOCTYPE html>
<head runat="server">
  <title>Page 1</title>
</head>
<body>
    <form id="form1">
        <header id="toolbar" class="header">
            <span id="scroll"></span>
            <span>This is my header with controls</span>
        </header>

        <div id="date" class="disp_date">bla-bla</div>
        <div id="divtimes">
            <svg id="times" class="times"></svg>
        </div>
        <div id="divrooms">
            <svg id="rooms" class="rooms"></svg>
        </div>

        <div id="scrl">
            <svg id="canv"></svg>
        </div>

    </form>
</body>

<script type="text/javascript">
   $(document).ready(function () {
      myLoad();
   });
</script>

Javascript:

// JavaScript code here
...

CSS:

// CSS code for styling
...

Answer 2

After making some adjustments to the layout and code, I have successfully fixed the compatibility issue with IE 9. If you want to see the updated JSFiddle, please click on this link

Here is the revised HTML:

<!DOCTYPE html>
<head runat="server">
  <title>Page 1</title>
</head>
<body>
    <form id="form1">
        <header id="toolbar" class="header">
            <span id="scroll"></span>
            <span>This is my header with controls</span>
        </header>

        <div id="date" class="disp_date">bla-bla</div>
        <div id="divtimes">
            <svg id="times" class="times"></svg>
        </div>
        <div id="divrooms">
            <svg id="rooms" class="rooms"></svg>
        </div>

        <div id="scrl">
            <svg id="canv"></svg>
        </div>

    </form>
</body>

<script type="text/javascript">
   $(document).ready(function () {
      myLoad();
   });
</script>

Javascript updates:

... ...

CSS changes:

body { margin:0; }

/* Styling for the header */
.header { width:100%; height: 60px; background:lightblue; position: fixed; margin:0px auto; top:0px; z-index:10; overflow:hidden; }

#scrl { overflow:scroll; position:absolute; left:150px; top:105px; }
...
...</answer1>
<exanswer1><div class="answer" id="34135299" lang="3.0" cat="1449485799" uid="U2VyZ2V5IFNldmFzdHlhbm92">
<p>I have made necessary modifications in the layout and code, and now it works perfectly fine even on IE 9. Click on <a href="http://jsfiddle.net/serge_s/3LjgspLm/6/" rel="nofollow">this link</a> to access the updated JSFiddle.</p>

<p>HTML:</p>

<pre><code><!DOCTYPE html>
<head runat="server">
  <title>Page 1</title>
</head>
<body>
    <form id="form1">
        <header id="toolbar" class="header">
            <span id="scroll"></span>
            <span>This is my header with controls</span>
        </header>

        <div id="date" class="disp_date">bla-bla</div>
        <div id="divtimes">
            <svg id="times" class="times"></svg>
        </div>
        <div id="divrooms">
            <svg id="rooms" class="rooms"></svg>
        </div>

        <div id="scrl">
            <svg id="canv"></svg>
        </div>

    </form>
</body>

<script type="text/javascript">
   $(document).ready(function () {
      myLoad();
   });
</script>

Javascript:

// JavaScript code here
...

CSS:

// CSS code for styling
...

The scrolling on IE9 is fragmented and uneven

Answer №1

Similar questions

Implement "BasicAuth" with asynchronous authentication of credentials

How can I reduce the size of a Bootstrap 5 carousel that spans the entire screen?

Implementing functions within a loop with the help of requirejs

Reposition the selection column to the right side within the UI-Grid

Is it possible to jest at a module function that is both exported and utilized within the same module?

When utilizing an API to render text into a div, the offsetHeight function may return 0

Encountered error: Unable to access property 'value' as it is undefined while mapping in react components

Which is the better choice for implementing a singleton: let or var?

Looking to migrate my current firebase/react project to typescript. Any tips on how to batch.update?

Refreshing the current checkbox input field in React

Does 1 CSS point amount to the same as 75% of a CSS Pixel?

Leverage JSON data to generate individual elements, rows, and columns for every object within the array

Here is a way to attach a function to dynamically generated HTML that is returned in an AJAX request

Display a single specific outcome within a React component's list

Utilize the Power of React.js and Express.js to Send Emails

identifies a data point from a combined dropdown menu

Adjust the appearance of the scrollbar with custom CSS, but be aware that the typical methods may not be effective in

Tips for overlaying text onto a MaterialUI icon

simultaneous ajax requests - encountering issues in getting a response from the initial one

Accessing JSON data model from Ember route or controller