Lines displaying in SelectItem

[joe.parks@hyperproductive.com]

I'm seeing the same problem described here:
http://forums.smartclient.com/showthread.php?t=26195

That post was for SmartClient; I'm seeing the issue using SmartGWT. Specifically, I see the issue using the EnterpriseBlue theme. With the SilverWave theme, for example, I do not see the issue.
The lines appear when the browser is in IE9 "Standards" mode.

Here is a simple example, using a datasource mapped to the AdventureWorks SQL Server sample db.

product.ds.xml

<DataSource ID="product" serverType="hibernate"
            beanClassName="com.hyperproductive.play.server.model.Product"
    >
    <fields>
        <field name="id" type="sequence" hidden="true" primaryKey="true"/>
        <field name="name" type="text"/>
        <field name="productNumber" type="text" title="SKU"/>
    </fields>
</DataSource>

module code

    public void onModuleLoad() {
        final DataSource products = DataSource.get("product");
        
        final DynamicForm form = new DynamicForm();
        final SelectItem selectProducts = new SelectItem("product");
        selectProducts.setOptionDataSource(products);
        selectProducts.setDisplayField("name");
        form.setItems(selectProducts);

        final IButton consoleButton = new IButton("Show Console");
        consoleButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                SC.showConsole();
            }
        });

        final VLayout layout = new VLayout();
        layout.setWidth100();
        layout.setHeight100();
        layout.setMembers(form, consoleButton);
        layout.draw();
    }

1. SmartClient Version: v8.3p_2013-06-13/Enterprise Deployment (built 2013-06-13)

2. IE 9

3. client-side only

4. no response processing error

5. no error logged

6. sample code above

Posts with incomplete information are much more likely to be ignored.

[Isomorphic]

What operating system are you on?

Can you apply all updates from Microsoft and re-test?

If the problem still occurs, please try updating the video card for your driver.

If it still occurs, please let us know the type of card and driver.

[joe.parks@hyperproductive.com]

While I go about updating the video drivers (although it is unlikely that I will be able to present such a "fix" to my client), may I ask whether you ran the sample code using the EnterpriseBlue theme?

[joe.parks@hyperproductive.com]

My development machine is Windows 8, with a Quadro FX 2800M.
The test and end-user machines are Windows 7.

All machines are up-to-date re:microsoft updates. I'm downloading the latest NVidia/quadro drivers now.

[Isomorphic]

It's not runnable, we don't have the bean or the server code.

But there are dozens of equivalent setups throughout the samples, and it's just you and this other guy reporting this oddness.

Also, if it's not obvious - there's no possible way SmartGWT could be drawing those lines. We apply CSS styles to elements, we do not draw individual lines. So this is a native rendering glitch, we're just trying to help you isolate the cause so you can report *something* to your customer.

[joe.parks@hyperproductive.com]

I'm still downloading the driver update.

In the meantime, I've looked at the latest showcase using the same browser settings and I get the visual artifact described.

Using the IE developer tools (F12), set the Browser and Document modes to "IE 9" and "IE 9 Standards", respectively. Select something in the list of examples, such as "Charting->Dynamic Data". Then use the scrollbar to scroll down the list of examples. This combination makes the lines appear every time on all the machines I've tried.

Please let me know whether this produces the artifact on your machine(s). Thanks.

[joe.parks@hyperproductive.com]

On one machine, I had to select multiple line items (shift-select) and then scroll, in order to reproduce the effect.

[Isomorphic]

We've already done this type of test about a dozen different ways, but no, no lines with IE9 on Win7, scrolling the tree of samples, and none if we go over to say, SQL -> Large Value Map and scroll the SelectItem in the FilterEditor.

Note, it's invalid to use the F12 tools to force the document mode to something else. Messing with that setting is known to put IE9 into a weird state that is neither quirks nor standards and has a bunch of bizarre bugs. But we did try it that anyway, and couldn't reproduce the problem.

[Isomorphic]

Still nothing with selecting multiple lines, even when invalidly forcing DOCTYPE through F12 tools.

However note, we got a screenshot from the other guy, which made it obvious that the lines are leftover pieces of the (native) focus outline.

If you put the browser into this invalid state (quirks mode page forced into standards) and you select a sample that doesn't take focus (so focus remains on the TreeGrid of samples; an example is ), then as you scroll down you can briefly see the focus outline drawn in the wrong place (a few rows downward from the TreeGrid header), but on a normal machine, this immediately disappears and does not persist as it does for you.

[joe.parks@hyperproductive.com]

Updating the drivers did not fix the problem. If anything, the effect is worse (more lines than before).

Running the showcase locally, I was able to reproduce the problem by changing the doctype in index.html to either "<!DOCTYPE html>" or "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">", both of which put IE in "Standards" mode, as described here: http://msdn.microsoft.com/en-us/library/ff955379(v=vs.85).aspx

Does SmartGWT not officially support Standards mode in IE?

[Isomorphic]

See the FAQ - we require standards mode in IE. The website Showcase isn't actually in "quirks" mode as IE reports it, but an in-between mode... you don't want to know.

In any case, this is just yet another way that you can reproduce this problem, but we can't. Can you try to figure out something in common between these Windows 7 machines - it could be something like they are all running a non-default theme, all have certain software installed, etc.

[Isomorphic]

Note, even though we can't reproduce it, you might be able to fix it by completely suppressing the native focus outline (discussed here, except you'd want div:selected).

Note that this would be an accessibility violation, which might matter depending on your users.

[joe.parks@hyperproductive.com]

Adding this to the host page before the closing body tag fixes the problem in the showcase. I still need to do some testing with my actual application.

<style type="text/css">
	div.gridBody:focus {
		border: none;
		outline: none;
	}
</style>

I will bring up the accessibility issue with the client.

[joe.parks@hyperproductive.com]

Here is the final version, hiding the outline for SelectItems, including multi-selects.

	<style type="text/css">
		.pickListMenuBody:focus {
			outline: none;
		}
		.treeMenuBody:focus {
			outline: none;
		}
		.gridBody:focus {
			outline: none;
		}
	</style>

[Isomorphic]

Thanks for posting that.

Just to remind other users, as coded, this would be considered an accessibility violation (since there's no way to see what element is focused).

However, on modern browsers (anything but IE8 and earlier) the ":focus" pseudoclass could be used to apply some other kind of styling, such as the blue glow that MacOSX machines use to indicate keyboard focus. That might somehow avoid this rendering artifact, and could reasonably be considered to meet accessibility standards.

Also, if anyone isolates this behavior to a browser plugin, high DPI machines, Windows theme or whatever is causing it, please do post it here.