different behaviour with slow resize vs quick resize

[claudiobosticco]

SmartClient Version: SNAPSHOT_v11.1d_2017-03-23/Enterprise Development Only (built 2017-03-23)

Chrome on OSX

Hello please try this test case in the showcase:

isc.Label.create({
    backgroundColor: "yellow", 
    width: "100%",
    height:30
}).addChild(
    isc.HStack.create({
        membersMargin: 15,
        members: [
            isc.Img.create({
                src: "flags/16/IT.png",
                layoutAlign: "center",
                localeValue: "it", size: 16
            }),
            isc.Img.create({
                src: "flags/16/UK.png",
                layoutAlign: "center",
                localeValue: "en", size: 16
            })
        ],
        height: 20,
        snapTo: "R",
        snapOffsetLeft: -30,
        width: 60
    })
)

If you resize the browser window, you'll see that if you shrink it slowly, than the flags remain visible because no scrollbar appears, otherwise the horizontal scrollbar appears.
Why is there that difference in behaviour?

[Isomorphic]

We do a slightly delayed resize since the browser fires events extremely rapidly and has some bugs around whether both scrollbars are needed at once.

If you move a large amount, the images extend past the margins out of the bounding box of their container, before they are resized down.

[Isomorphic]

Just to check - are you saying horizontal scrollbars *remain* after resizing is complete, even though they are unnecessary? That should not be happening.

[claudiobosticco]

Yes, exactly, when resizing slowly the scrollbars remain.

[Isomorphic]

Do you get this effect outside of the special showcase environment? If not, ignore it; the showcase environment does several special things.

If you do get it outside of the showcase, please specify:

1. what skin you are using (and whether it's been customized)
2. whether you mean browser-level scrollbars or scrollbars on some other element (and which element if so)
3. what version of OSX you are using
4. whether you see this on any other browsers

[claudiobosticco]

SmartClient Version: SNAPSHOT_v11.1d_2017-04-06/Enterprise Development Only (built 2017-04-06)

Well, actually both in my application and in the test case, setting overflow:"hidden" on the Label seems to fix the problem. So I don't know if it may be a bug or it was bad usage.

1. Tahoe
2. the scrollbar is on the featureExplorer_exampleViewer_paneContainer PaneContainer
3. OSX Sierra
4. Chrome and Safari

[Isomorphic]

Where do you get scrollbars when you run standalone? That's the more mysterious case and the element you've named is part of the Feature Explorer, and wouldn't exist in a standalone app.

[claudiobosticco]

SmartClient Version: SNAPSHOT_v11.1d_2017-04-11/Enterprise Development Only (built 2017-04-11)

Chrome on OSX Sierra

Well, I must step back.

That first test case didn't replicate my actual problem, but, while trying to replicate it, I found what to me seemed a bug .

My actual problem was not related to scrollbars, instead the child - snapped to the right of the Label - got clipped when quickly shrinking the browser window.
It doesn't happen if I set

overflow:"hidden"

on the Label, so I don't know if it's a bug or bad usage.

Here is a similar test case (but does not result in the exact problem I was observing in my application), which shows a behaviour that seems a bug to me, though overflow:"hidden" on the Label fixes it:

isc.Label.create({
    ID: "testLabel",
    backgroundColor: "yellow", showResizeBar: true,
    width: "*",
    height: 30
}).addChild(
    isc.HStack.create({
        membersMargin: 15,
        members: [
            isc.Img.create({
                src: "flags/16/IT.png",
                layoutAlign: "center",
                localeValue: "it", size: 16
            }),
            isc.Img.create({
                src: "flags/16/UK.png",
                layoutAlign: "center",
                localeValue: "en", size: 16
            })
        ],
        height: 20,
        snapTo: "R",
        snapOffsetLeft: -30,
        width: 60, showEdges: true
    })
)

isc.HLayout.create({
    maxWidth: 400, width: 400, showEdges: true,
    members: [
        testLabel
    ]
})

If you shrink the Label, you'll see that the resizeBar doesn't stay where you release it, and the snapOffsetLeft is lost.

Video here: https://www.youtube.com/watch?v=u4dHZWaHKGo

[Isomorphic]

What we'd recommend here is switching to using a Canvas or Layout as the parent of the inner HLayout.

A Label is intended as a label; while it inherits the general-purpose container functionality of Canvas, it's easy for Label-specific behaviors to clash with container behaviors (especially wrt to auto-sizing and browser workarounds).

However if you encounter a similar issue when not using Label as a container please do let us know.

[claudiobosticco]

SmartClient Version: SNAPSHOT_v11.1d_2017-04-13/Enterprise Development Only (built 2017-04-13)

Chrome on OSX Sierra

Hello, the test case has the same exact behaviour if I use a Canvas instead of a Label, like this:

isc.Canvas.create({
    ID: "testLabel",
    backgroundColor: "yellow", showResizeBar: true,
    width: "*",
    height: 30
}).addChild(
    isc.HStack.create({
        membersMargin: 15,
        members: [
            isc.Img.create({
                src: "flags/16/IT.png",
                layoutAlign: "center",
                localeValue: "it", size: 16
            }),
            isc.Img.create({
                src: "flags/16/UK.png",
                layoutAlign: "center",
                localeValue: "en", size: 16
            })
        ],
        height: 20,
        snapTo: "R",
        snapOffsetLeft: -30,
        width: 60, showEdges: true
    })
)

isc.HLayout.create({
    maxWidth: 400, width: 400, showEdges: true,
    members: [
        testLabel
    ]
})

[Isomorphic]

We see the problem you are referring to, and are looking into the best solution.

[Isomorphic]

We've applied a fix for SC 11.0p and newer releases. It should be in the nightly builds dated 2017-04-29 and beyond.

[claudiobosticco]

SmartClient Version: SNAPSHOT_v11.1d_2017-05-01/Enterprise Deployment (built 2017-05-01)

I can confirm that it's fixed, both in the test case and in the actual use case in my application, thank you very much!