IE fake text-shadow flows separately from its text

Question

I've been using jQuery and IE filters to create a drop shadow in IE<=9, to make up for the missing text-shadow property. This can be seen in the top-of-page h2 headings on this site, which uses jQuery on browsers that don't support the text-shadow property (detected by modernizr) to replicate the text inside the h2 element...

jQuery(".no-textshadow h1, .no-textshadow h2").each(function(){
  var text_shadow_markup = jQuery(this).html();
  jQuery(this).append("<span class='shadow'>"+text_shadow_markup+"</span>");
});

...where it is styled with this CSS (courtesy of this IE drop shadow technique):

@media only screen and (min-width: 768px) {
  h2 {
    text-shadow: #000000 0px 5px 5px;
    position: relative;
    zoom: 1;
    z-index: 1;
  }
  h2 span.shadow {
    color: #000000;
    position: absolute;
    left: -7px;
    top: -2px;
    z-index: -1;
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=2) progid:DXImageTransform.Microsoft.blur(pixelradius=5,enabled='true');
    -ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=2) progid:DXImageTransform.Microsoft.blur(pixelradius=5,enabled='true')";
  }
}

The problem: the shadows flow independently of the text behind them. You can always see this in IE8 and IE9 by slowly changing the window width until one of the shadows pops away from its text.

I don't understand how this can happen if the shadow span is absolutely positioned in the containing box of the h2 element. Yet they are able to flow as if they were unattached. I realise this may be a browser bug and therefore would be happy with a workaround supporting IE8 & IE9, as I would be if someone can point out any problems with my application above.

p.s., I've heard that CSS Sandpaper text-shadow implements a similar technique and would accept someone's endorsement if that's an accepted best-practice way of dealing with the above problem.

Answer 1

This question has been rephrased & discussed in this thread on SitePoint. The problem is now solved on the live site listed above, through the following two changes:

1) To keep the line length the same, a right padding must be added to the superimposed (shadow) element that matches the left positioning offset, as in:

h2 span.shadow { ...
  left: -7px;
  padding-right: 7px; ...

2) The superimposed (shadow) <span> must be moved inside the <a> and given a new stacking context, by changing the jQuery selector above to:

jQuery(".no-textshadow h1 a, .no-textshadow h2 a").each(function(){

and adding this CSS:

h2 a {
  display: block;
  zoom: 1.0;
  position: relative;
}

I am still uncertain why (2) is necessary (or sufficient). There are some clues on the design page for jQuery Textshadow (this plugin was agreed to be a best-practice solution, to answer part of the original question). The two sections for Glow and Blur describe adjustments that must be made to element positioning, as well as nested <span> elements each creating a new stacking context.

I would be open to other solutions & explanations and hope this helps anyone having the same problem.