Can GWT image sprites using ImageBundle be made to work in IE7 and IE6?

Question

I'm trying to use a ClientBundle in my GWT application to make multiple images get sent as a single file. I declare the bundle like so:

public interface MyResources extends ClientBundle {
  public static final MyResources INSTANCE = GWT.create(MyResources.class);

  @Source("icon1.png") ImageResource icon1();
  @Source("icon2.png") ImageResource icon2();
}

This works great in Firefox and IE8, but in IE7 (and earlier) the whole sprite shows up in place of one of my original images - that is, icon1 is next to icon2 next to icon3, and so on. In IE8's developer tools using IE8-as-IE7 mode or Compatibility View, I can see that it's showing an image with a file name like 26BEFD2399A92A5DDA54277BA550C75B.cache.png, which is what I'd expect.

So is there any way to make GWT image sprites work in IE7 and lower? If not, is there any way to gracefully degrade so users of other browsers get the speedup of spriting and IE7 and IE6 users get something that looks right but is slower?

Edit: The Client Bundle Developer's Guide has a discussion of using ClientBundle and @sprite, and says "Support for IE6 isn't feasible in this format, because structural changes to the DOM are necessary to implement a "windowing" effect. Once it's possible to distinguish ie6 and ie7 in user.agent, we could revisit support for ie6. In the current implementation, the ie6 code won't render correctly, although is a purely cosmetic issue." Is this what's going on in my case, and is there a way to work around it? Showing all the images is "purely a cosmetic issue", but it's a pretty severe one.

Edit 2: Here's how I use the images:

public class MyTabHeader extends Composite {
  @UiField Image icon;

  public MyTabHeader(String iconPath) {
    initWidget(uiBinder.createAndBindUi(this));
    this.icon.setUrl(iconPath);
  }
}

public class MyTabPanel extends TabPanel {
  public MyTabPanel() {
    String icon1 = MyResources.INSTANCE.icon1().getURL();
    MyTabHeader tabHeader1 = new MyWidget(icon1);
    Widget tabContent1 = new HTML("Content 1");
    add(tabContent1, tabHeader1);

    String icon2 = MyResources.INSTANCE.icon2().getURL();
    MyTabHeader tabHeader2 = new MyWidget(icon2);
    Widget tabContent2 = new HTML("Content 2");
    add(tabContent2, tabHeader2);
  }
}

Answer 1

How are you using the ImageResource?

The problem that you are referencing only exists if you use it with the CssResource @sprite directive.

If you use it by instantiating an Image object instead, it should work fine in IE6+7

Answer 2

The use of Image.setUrl(MyResources.INSTANCE.icon1().getUrl()) is the problem.

You should be using Image.setResource(MyResources.INSTANCE.icon1()) instead

Answer 3

I'm getting a similar problem in IE7 too, and mainly because I have no choice but to use the "getUrl()" option because I need to set the resource as a background image. i.e. Instead of something like (taking the above example):

this.icon.setUrl(MyResources.INSTANCE.icon1().getURL());

I need to do:

this.mypanel.getElement().getStyle().setBackgroundImage("url("+MyResources.INSTANCE.icon1().getURL()+")");

Whereas the fix for the first bit of code above is to do "this.icon.setResource(MyResources.INSTANCE.icon1())", that doesn't work for setting a background image, as it just expects a String. In IE8 and other browsers, the second bit of code works fine. But in IE7, it displays the whole image bundle (like the original issue explained above).

So is there any way to be able to set a background image using an image from a GWT ResourceBundle so that it will work correctly in IE7?