Rendering problems with background images in IE9 with latest build

Version: SmartClient Version: SNAPSHOT_v8.3d_2012-09-24/LGPL Development Only (built 2012-09-24)

Browser: IE9

I just tried updating to the latest 3.1d nightly. I was previously using a version from a couple of months ago.

When I did, I had to change my calls to setBackgroundRepeat because the enumeration used for the parameter changed type.

Now my backgrounds are no longer rendering correctly.

I am building up something like a toolbar and trying to put separators between groups of buttons. I build up the separators as follows:

VLayout vSeparatorGroup = new VLayout();
vSeparatorGroup.setSize("3px", "19px");
vSeparatorGroup.setBackgroundImage("[SKIN]Product/V_separator.png");
vSeparatorGroup.setBackgroundRepeat(BackgroundRepeat.REPEAT_Y);

The image is 3x1 with red/green/blue pixels. I place several of these items in the parent using addMember().

In Firefox, chrome, the images render correctly.

In IE9, some render correctly and others do not (see attached enlarged image). With the previous rev this worked fine. Any idea what is going wrong?

Looking at the page from IE's developer tools, the one that looks fine looks like:
<div class="normal" id="isc_5S" style="left: 92px; top: 2px; width: 3px; height: 19px; overflow: visible; position: absolute; z-index: 202970; cursor: default; background-image: url("http://localhost/com.hp.cp.pm.gwt.linker.PMLinker/sc/skins/Enterprise/images/Product/V_separator.png");/>

and the one that looks wrong looks like:
<div class="normal" id="isc_5S" style="left: 151px; top: 2px; width: 3px; height: 19px; overflow: visible; position: absolute; z-index: 202988; cursor: default; background-image: url("http://localhost/com.hp.cp.pm.gwt.linker.PMLinker/sc/skins/Enterprise/images/Product/V_separator.png");/>

The only differences I see are the position and z-index information. Not certain why they are rendering differently.

Is this an IE9 defect? I wasn't able to find anything related to this by googling. If so, was smartGwt doing something before that was compensating for the defect?

[Isomorphic]

Nothing changed about the implementation, and as the docs say, we don't try to address native browser bugs with this API (and there are many).

Is it possible this was never working for IE9 and you didn't notice it? Or perhaps you've added other CSS, or changed the DOCTYPE, and that's what broke it?

It is not possible that it was never working with IE9. We have had a large number of people working with this application every day for 2 years and have never seen this before. We did not make any CSS or DOCTYPE changes (although it is possible that something was defaulting and the default changed).

All I did was drop in the 2 newer jars (smartgwt.jar, smartgwt-skins.jar) and fix the compile errors because of the type change from BkgndRepeat to BackgroundRepeat and uses of HoverCustomizer (because it changed from an interface to a class).

Now just about everywhere we are repeating a background image vertically or horizontally is displaying incorrectly.

I think there must be some change in the setBackgroundRepeat functionality. Here is the HTML generated by the old and new code:

Old code (that worked):
<div class="normal" id="isc_5P" style='left: 92px; top: 2px; width: 3px; height: 19px; overflow: visible; position: absolute; z-index: 202952; cursor: default; background-image: url("http://pm-demo-2/com.hp.cp.pm.gwt.linker.PMLinker/sc/skins/Enterprise/images/Product/V_separator.png"); background-repeat: repeat-y;' onscroll="return isc_VLayout_6.$lh()" eventProxy="isc_VLayout_6">
&nbsp;
</div>

New code (that does not work):
<div class="normal" id="isc_61" style='left: 92px; top: 2px; width: 3px; height: 19px; overflow: hidden; position: absolute; z-index: 203060; cursor: default; background-image: url("http://localhost/com.hp.cp.pm.gwt.linker.PMLinker/sc/skins/Enterprise/images/Product/V_separator.png");' onscroll="return isc_VLayout_6.$lh()" eventProxy="isc_VLayout_6">
&nbsp;
</div>

Notice how the "background-repeat" option is missing from the new HTML that is generatorated. Heres the line of code that changed:

Old code:
vSeparatorGroup.setBackgroundRepeat(BkgndRepeat.REPEAT_Y);

New code:
vSeparatorGroup.setBackgroundRepeat(BackgroundRepeat.REPEAT_Y);

Seems like a defect.

Upon further investigation, it appears that the string value for the new enum (BackgroundRepeat.REPEAT_Y) is "REPEAT_Y" whereas the previous enum (BkgndRepeat.REPEAT_Y) was "repeat-y". Notice that the old value has a "dash" and the new value has an "underscore". If when using the new jars I modify my code to set the backgroundRepeat attribute directly with the old string with the dash, the HTML output includes the "repeat" attribute. However if I use the new string with the underscore it does not. Appears that it does not work with the new string value.

Unfortunately for me, even with the same HTML output, the display still is not right so the cause of that must be something else.

[jventurini]

I am experiencing a similar problem as pgrever, except I am using BackgroundRepeat.REPEAT_X which now has a new value of 'REPEAT_X'.

The correct value should be 'repeat-x' which was the value in the previously used BkgndRepeat.REPEAT_X enum.

Is there a work around for this until this gets fixed? The 'setBackgroundRepeat' will only take the BackgroundRepeat enum.

Thanks

[Isomorphic]

We've confirmed what you observed about the missing HTML properties, and have made a fix in the SC 8.3d branch which should be in the next nightly build.

We verified that the style string for the DIV in question in IE now contains "background-repeat: repeat-y" after the fix is present.

Thanks for the help.

[levi]

Thanks for the fix,
confirming for value BackgroundRepeat.NO_REPEAT
in SNAPSHOT_v8.3d_2012-10-09