Announcement

**DannyJo** · 5 Aug 2013, 06:07

Hello. I'm currently trying to replicate this issue but not having much luck. Seems to be running fine in IE10, I've tried different kinds of modes but all of them works except for IE10 compatability, IE8 and IE7 browser modes where the tab buttons aren't even clickable at all.

All document modes are working when browser mode is set to IE10.

Could you provide some more information about browser state when you see this issue?
What browser and document mode are you in?
Can you see any issues logged in the console?
Can you confirm if this is working in Chrome and Firefox for you?
Are your webpages using a valid doctype header?

A suggestion for something you could try quite quickly is to instead of using a page with framesets, use a normal webpage, just printing out hello world or similar. I've just come across some reports on IE10 not handling framesets in certain cases.

**martintaal** · 14 Aug 2013, 09:01

I have pasted the following code:

Code:

isc.TabSet.create({
    ID: "tabSet",
    tabBarPosition: "top",
    width: 400,
    height: 200,
    tabs: [
        {title: "Blue", icon: "pieces/16/pawn_blue.png", iconSize:16, canClose: true,
         pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})},
        {title: "Frames", icon: "pieces/16/pawn_green.png", iconSize:16, canClose: true,
         pane: isc.HTMLPane.create({
            contentsType: 'page',
            height: '100%',
            width: '100%',
            contentsURL: 'http://irc.openbravo.com/temp/isc-27389.html'
         })}
    ]
});


isc.IButton.create({
    title: "Add Tab",
    top: 225,
    click: function () {
        // alternate between yellow pawn and green cube
        if (tabSet.tabs.length % 2 == 0) {
            tabSet.addTab({
                title: "Yellow",
                icon: "pieces/16/pawn_yellow.png", iconSize:16, canClose: true,
                pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_yellow.png"})
            });
        } else {
            tabSet.addTab({
                title: "Green",
                icon: "pieces/16/cube_green.png", iconSize:16, canClose: true,
                pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/cube_green.png"})
            });            
        }
        if (tabSet.tabs.length == 1) tabSet.selectTab(0);
    }
});

isc.IButton.create({
    title: "Remove Tab",
    top: 225,
    left: 110,
    click: function () {
        tabSet.removeTab(tabSet.tabs.length-1);
    }
});

in this file

Code:

\isomorphic\system\reference\inlineExamples\welcome\helloButton.js"

Just to avoid graphical problems/glitches while trying to paste it later in the SC Explorer.

Then in the IE10 browser:
* Go to the "SmartClient_Explorer.html"
* Select browser mode "IE10"
* Select document mode "Standard" or "IE9 standards"
* Go into the "Hello World" (the first menu item).

If you open the second tab ('Frames') the smartclient main web page will be shown inside it.

If you select again the first tab, you will notice that its content is hidden.

If more tabs are added, the new content is available. If you close this second tab, then the content of the first tab will be available again.

PS: Any kind of modification in the contentsURL url, is not an option since it is something external to us (so we cannot get rid of the framesets)
PS2: No errors in the console

Regards.

**Isomorphic** · 14 Aug 2013, 10:44

Hi Martin,

It looks like your instructions involve dynamic modifications of the DOCTYPE / document mode using Developer Tools. This is pretty badly broken in IE9/10 and it's easy to get into a weird state which is neither standards nor quirks, and cannot be reached by a normal page.

Can you try this instead with a normal page, and the HTML5 DOCTYPE? You will most likely experience inability to reproduce the issue, as we did previously.

**martintaal** · 16 Aug 2013, 08:33

My instructions involve a simple way to show you how to reproduce the issue using your own tools. It is not me trying to "hack" IE10 to reproduce a corner case issue but just providing a simple way to reproduce an issue that happen always in a more complex environment (our application).

If you want to see the real case where we reproduce the issue, please go to

http://live.builds.openbravo.com/

and then press "pgsql" link

User: Openbravo
Password: openbravo

After login, notice that you enter into a page with <!DOCTYPE html> and browser mode "IE10" and document mode "standards" (without the need to change it manually)

Now go to "Application" (in the top bar) -> "Warehouse Management" -> "Analysis Tools" -> "Expiration Date Report"

you have the same situation that the simplified case (clicking 'Workspace' tab will show empty content until 'Expiration Date Report' be closed)

If that is not enough for you, I will try to prepare a more sophisticated example from scratch taking your libraries and doing my own "simple" html to ensure it loads the page directly in browser mode "IE10" and document mode "standards" to reproduce the issue, but I think it doesn't worth since you can reproduce the same issue in your Smartclient_Explorer by changing manually the browser and document modes.

Said that, please let me know if I have to spend more time preparing another example to reproduce the same thing in a different way that don't involve manually change the browser and document modes or is enough with the current one you already have.

Regards.

**Isomorphic** · 16 Aug 2013, 08:39

It's not OK for test repro instructions to involve changing the document mode because this feature is badly broken in IE and produces spurious results.

Specifically, even if the problem could be reproduced this way, it would not be a bug, and nothing would have been learned.

All we're asking you to do is take the relatively trivial step of running your test standalone, with the DOCTYPE set via normal means.

This is an eminently reasonable request given that we tried your previous instructions and couldn't reproduce a problem.

**martintaal** · 22 Aug 2013, 06:00

1. Download an offical VM with Windows 8 and IE10 to avoid any plugin or any other thing could be prevent you to reproduce the issue:

http://www.modern.ie/en-us/virtualization-tools#downloads

2. Load the VM, go to the Desktop and open Internet Explorer 10.

Load this url:

http://77.230.197.2:8080/isomorphic/system/reference/SmartClient_Explorer.html (be patient if it takes time to load, it has a poor bandwitdh)

This is your 9.1d 2012-08-21 version.

If you want, you can use your own server, but is a MUST to ensure that the server is not in your own intranet, to avoid the compatibility mode that you don't want to manually change.

3. Go to any menu entry ('Hello World', for example), and paste the code three posts above, and try it.

4. If you open the second tab ('Frames'), then, the content of the first one is hidden (if you select again the first tab, now is "empty"). If more tabs are added, the new content is available. If you close this second tab, then the content of the first tab is available again.

Here it goes a video showing how I reproduce the issue: http://screencast.com/t/YdHbVnJB3EL

NOTE: Things that we cannot do on our side to fix the issue:
* Change the HTMLPane contentsURL, since it is provided outside and we have not anything to do with it.
* Add any kind of http-equiv="X-UA-Compatible" meta tag to our sources, since we have some other HTMLPane (iframes) that won't display ok with them.

Regards.

**Isomorphic** · 26 Aug 2013, 13:46

Thanks for your persistence with this. We have now reproduced the issue on our end.
The problem does indeed appear to be a native issue with Internet Explorer. The problem seems to be that although the native IFRAME element has been hidden using css, the browser is still refusing to draw elements that are visible in the same position on the page, if they do not have a higher z-index. (It also appears to only manifest when the IFRAME loads a page which itself contains a frameset).

We are looking at a general workaround for this issue that we can roll into the framework, but as an immediate application level workaround, we believe you should be able to resolve this by reducing the z-index of the HTMLPane. Try adding a "sendToBack()" call like this:

Code:

         tabDeselected: function(tabSet, tabNum, tabPane, id, tab, newTab, name) {
             tabPane.sendToBack();
         }

Let us know if that doesn't resolve it for you. We'll also let you know if we can come up with a way to paper over this in the framework

Regards
Isomorphic Software

**martintaal** · 27 Aug 2013, 14:06

This solution partially solves the issue. Try this code:

Code:

isc.TabSet.create({
    ID: "tabSet",
    tabBarPosition: "top",
    width: 400,
    height: 200,
    tabDeselected: function (tabNum, tabPane, ID, tab, newTab) {
      tabPane.sendToBack();
    },
    tabs: [
        {title: "Blue", icon: "pieces/16/pawn_blue.png", iconSize:16, canClose: true,
         pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})},
        {title: "Yellow", icon: "pieces/16/pawn_blue.png", iconSize:16, canClose: true,
         pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_yellow.png"})},
        {title: "Frames", icon: "pieces/16/pawn_green.png", iconSize:16, canClose: true,
         pane: isc.HTMLPane.create({
            contentsType: 'page',
            height: '100%',
            width: '100%',
            contentsURL: 'http://irc.openbravo.com/temp/isc-27389.html'
         })}
    ]
});


isc.IButton.create({
    title: "Add Tab",
    top: 225,
    click: function () {
        // alternate between yellow pawn and green cube
        if (tabSet.tabs.length % 2 == 0) {
            tabSet.addTab({
                title: "Yellow",
                icon: "pieces/16/pawn_yellow.png", iconSize:16, canClose: true,
                pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_yellow.png"})
            });
        } else {
            tabSet.addTab({
                title: "Green",
                icon: "pieces/16/cube_green.png", iconSize:16, canClose: true,
                pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/cube_green.png"})
            });            
        }
        if (tabSet.tabs.length == 1) tabSet.selectTab(0);
    }
});

isc.IButton.create({
    title: "Remove Tab",
    top: 225,
    left: 110,
    click: function () {
        tabSet.removeTab(tabSet.tabs.length-1);
    }
});

And then try to do this sequence (open the following tabs in this order)

1: Blue (the starting point)
2: Yellow
3: Frames
4: Yellow (it seems that the patch work, since it is shown)
5: Blue
6: Yellow <-- here it is broken again, it is not shown!

If I do even more advanced things, like only do the "sendToBack" in the tabs with framesets, I can break it too. Example:

Code:

isc.TabSet.create({
    ID: "tabSet",
    tabBarPosition: "top",
    width: 400,
    height: 200,
    tabDeselected: function (tabNum, tabPane, ID, tab, newTab) {
      if (tabNum == 2 || tabNum == 3) {
        tabPane.sendToBack();
      }
    },
    tabs: [
        {title: "Blue", icon: "pieces/16/pawn_blue.png", iconSize:16, canClose: true,
         pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})},
        {title: "Yellow", icon: "pieces/16/pawn_blue.png", iconSize:16, canClose: true,
         pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_yellow.png"})},
        {title: "Frames A", icon: "pieces/16/pawn_green.png", iconSize:16, canClose: true,
         pane: isc.HTMLPane.create({
            contentsType: 'page',
            height: '100%',
            width: '100%',
            contentsURL: 'http://irc.openbravo.com/temp/isc-27389.html'
         })},
        {title: "Frames B", icon: "pieces/16/pawn_green.png", iconSize:16, canClose: true,
         pane: isc.HTMLPane.create({
            contentsType: 'page',
            height: '100%',
            width: '100%',
            contentsURL: 'http://irc.openbravo.com/temp/isc-27389.html'
         })}
    ]
});


isc.IButton.create({
    title: "Add Tab",
    top: 225,
    click: function () {
        // alternate between yellow pawn and green cube
        if (tabSet.tabs.length % 2 == 0) {
            tabSet.addTab({
                title: "Yellow",
                icon: "pieces/16/pawn_yellow.png", iconSize:16, canClose: true,
                pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_yellow.png"})
            });
        } else {
            tabSet.addTab({
                title: "Green",
                icon: "pieces/16/cube_green.png", iconSize:16, canClose: true,
                pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/cube_green.png"})
            });            
        }
        if (tabSet.tabs.length == 1) tabSet.selectTab(0);
    }
});

isc.IButton.create({
    title: "Remove Tab",
    top: 225,
    left: 110,
    click: function () {
        tabSet.removeTab(tabSet.tabs.length-1);
    }
});

Sequence.

1: Blue (the starting point)
2: Yellow
3: Frames A
4: Frames B
5: Frames A
6: Yellow
6: Frames A <-- here it is broken again, it is not shown!

Regards.

**Isomorphic** · 27 Aug 2013, 16:23

This appears to be another manifestation of the same problem - when you "sendToBack" you're pushing the Pane's zIndex down to be very low so other widgets in the same parent will be rendered in front of it, since the native bug is that if the IFRAME has a higher z-index than some sibling element, it prevents the sibling from being properly rendered even though the IFRAME has visibility set to "hidden".
If you have multiple frames like this, which are all being pushed to the back they can end up obscuring each other since they all have very low z-indices.

The fix for this would be to add a tabSelected handler which calls "bringToFront" on the pane. This will ensure that the pane "resurfaces" above all the other panes that had been sent to the back.

Let us know if that doesn't fix it for you

Announcement

Problem in tabs with Internet Explorer 10

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment