CSS3 PIE Not Scaling Background Images In IE

Question

I have PIE on my site so that IE can do border-radius, drop-shadow, etc. All was well until I decided to make the site load a little quicker by converting the common background images into a sprite and positioning them with CSS. This works fine until you zoom in in IE. Whilst the div, border-radius and drop shadow resize nicely, the background image doesn't scale and ends up showing the other sprite images.

Does anyone know how to sort out PIE (either by css or messing with the behaviour) so that it behaves nicely in IE when a user changes the page zoom?

score 3 · Accepted Answer · answered Mar 09 '11 at 10:32

Not ideal, but have resorted to removing the behavior attribute from every element using javascript:

<!--[if ie]>
<script type="text/javascript">
function removeBehavior()
{
  if((screen.deviceXDPI / screen.logicalXDPI) != '1')
  {
    $("*").each(function(){
      $(this).css("behavior", "none");
    });
  }
}
removeBehavior();
window.onresize = removeBehavior;
</script>
<[endif]-->

The function will only run in IE - what it does is check the screen size. If it is not 1 (equals 100%) then (using jQuery) go through the entire dom and remove the behavior attribute (or at the very least set it as an empty value).

I then call the function on the first page call and add it to the onresize event in case the user changes the zoom whilst viewing the page.

It's not ideal but it works.

CSS3 PIE Not Scaling Background Images In IE

1 Answers1