Home/ Questions/Q 8079141
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T16:00:55+00:00

Here’s a JSFiddle that breaks uniquely in Internet Explorer 9. I’m hoping someone has

  • 0

Here’s a JSFiddle that breaks uniquely in Internet Explorer 9. I’m hoping someone has seen this and knows how to resolve it.

http://fiddle.jshell.net/se9Kc/1/

Note that the scroll area top edge decoration, or “fader”, gets clipped on the right side in IE9.

I understand it’s natural to question the use of “fixed” at this point. The full page has an inset scrolling table with an absolutely-positioned header, adjacent to the search criteria. The “fader” is anchored to its non-scrolled (but still fluidly-generated) origin with position: fixed.

The defective algorithm seems to go like this:

  1. correctly generate the visibility mask and content for the fixed element
  2. correctly position the element content as requested
  3. incorrectly position the element visibility mask against the left edge

Help?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After doing a bit of testing, it seems like using javascript to handle that particular css property allows it to function properly.

    Remove:

    position: fixed;

    and add somewhere on your page:

    <script>    
    $(.fadeTopGradient).css({'position':'fixed'})
</script>

    If you would like accomplish this with css alone, I’m not 100% sure what to tell you. Though I did see a question regarding position:fixed in IE9 asked before here: position:fixed breaks in IE9

    I hope this helps.

    • 0