MenuButton edge displaying different on Microsoft Edge

[martintaal]

Hello team,

in our application we have a toolbar which displays some custom menu Smarclient's MenuButtons. We can see that the style we are using for the edges in these buttons is rendered different in Microsoft Edge, compared with the rest of supported browsers.

I have attached two screenshots to illustrate this. You can see the appearance in Chrome (menuButtonBorderChrome.png) and how it looks different on Edge (menuButtonBorderEdge.png).

In the following URL[1] you can find some sample code in case you want to check it. And here[2] you can find the style definitions to be used together with the sample.

Thanks in advance.

[1] http://pastebin.com/K4MQSS2U
[2] http://pastebin.com/ZdXACbyW

[Isomorphic]

A couple of questions:

1. What version are you running? If not the latest patched build, please try the latest patched build.

2. Why do you attritrube this problem to SmartClient as opposed to Edge itself (browsers have irregularities in CSS rendering that you might uncover when deeply customizing CSS - we can't shield you from all of these). Is there a specific SmartClient behavior that isn't working as documented here?

[martintaal]

Hello,

1. This can be reproduced in the latest patched build.
2. We can try to manage the styling of the button by adding a hack for Edge in our CSS.

Thanks.

Regards.

[Isomorphic]

Looking again at your code, there are a few problems you should correct (although it's not clear if any of these explains why your CSS behaves differently on Edge):

1. It's never valid to invoke Super() for any method other than the one you're in

initWidget: function() {
   var myMembers = [isc.ExampleIconButtonEnabled.create(), isc.ExampleIconButtonDisabled.create()];
   this.Super('addMembers', [myMembers]);
   this.Super('initWidget', arguments);

2. This class can only be used once, because it has a single "members" Array containing just one widget, which all instances of the class would share.

isc.defineClass('ExampleLayout', isc.VLayout).addProperties({
   width: 300,
   layoutMargin: 5,
   membersMargin: 10,
   members: [isc.ExampleToolbar.create({})]
});

3. This order of operations is going to create an unnecessary redraw if autoDraw is ever true, and a little extra work in any case. It's simpler and more efficient to just override the baseStyle property in the addProperties() call that defines the class.

initWidget: function() {
   this.Super('initWidget', arguments);
   this.setBaseStyle('OBToolbarIconButtonDisabled');
}