Width of Button switches on hover in firefox

[SimonF]

Hi there,
It seems when initially loading a page with smartclient-components the width on the buttons are not correct set.
This only happens when the SC-files (I assume the fonts are the problem) are not already loaded.
After hitting Ctrl+F5 (reload without cache)

Version: SmartClient_v111p_2017-07-19_Pro
Browser: Firefox 54.0.1 (32-Bit)
Skin: Tahoe
Density: Medium


This does not happen in Chrome or Internet Explorer.

Canvas.resizeControls(4);
Canvas.resizeFonts(2);
isc.ToolStrip.create({
    "ID": "theToolstrip",
    "width": "100%",
    "members":
    [
        isc.Button.create({
            "ID": "theShortButton",
            "overflow": "visible",
            "title": "short text",
            "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png",
        }),
        isc.Button.create({
            "ID": "theLongButton",
            "overflow": "visible",
            "title": "longer Text Example",
            "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png"
        })
    ]
})

Best regards

[Isomorphic]

You need to set the iconSize to match the size of your icon, otherwise sizes will not be known until the image is loaded.

[SimonF]

But this does only happen with the Tahoe-Skin?
With Enterprise-Skin and the same example this width-changing effect does not occur.


To keep the possibility to switch between the skins this should be handled the same way through all the skins imho.

Edit: Yes setting the iconSize does indeed "fix" this, but looking at the documentation the default iconSize should already be set to 16.
http://www.smartclient.com/smartclie...anvas.iconSize

[SimonF]

Hi there,
Is there any explanation why this is workign with the Enterprise skin, but not with the Tahoe skin?
Reading your answer the resizing of the buttons should also happen in the Enterprise skin, but as shown in the gif , it doesn't.

[Isomorphic]

The problem happens because the icon media you supplied does not match the skin default in the Tahoe case, but does in the Enterprise case.

[SimonF]

Hi there,
I've retested the issue with the latest downloadable build (SmartClient_v111p_2017-07-30_Pro)

Neither iconSize nor iconWidth does change the shown behaviour of the first post.

Canvas.resizeControls(4);
Canvas.resizeFonts(2);
isc.ToolStrip.create({
    "ID": "theToolstrip",
    "width": "100%",
    "members":
    [
        isc.Button.create({
            "ID": "theShortButton",
            "overflow": "visible",
            "title": "short text",
            "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png",
        }),
        isc.Button.create({
            "ID": "theLongButton",
            "overflow": "visible",
            "title": "longer Text Example",
            "iconSize": 16,
            "iconWidth": 16,
            "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png"
        })
    ]
})

Any solutions to this?

[SimonF]

This issue persists with the latest downloadable (Version SmartClient_v111p_2017-08-02_Pro).
Is there any known working workaround? Is this issue recognized for further inspection?

Best regards

[SimonF]

Hi again,
In the latest nighlty of SmartClient_v111p_2017-08-08_Pro the issue does persists.
I would also like to add that this issue is also affecting the docs (e.g. https://www.smartclient.com/smartcli...zeIncrease=4):


Is there any workaround for this by now?

Best regards

[Isomorphic]

We are still looking into this one. The browser is simply misreporting the size to us, then later telling us the correct size as expected, and trying to isolate exactly when and why the browser misreports the size is slow work.

[gchan]

We also have the same issue with the toolbar buttons shrinking (to their correct width) on hover. Also, components using CSS text-shadow or box-shadow are too tall We can provide example screenshots if helpful.

We are using Chrome 61 (and 62 beta), the Enterprise Blue skin with SmartClient v11.0p_2017-02-04/PowerEdition. Everything looks fine in IE11.

Do you have an estimate when this might be fixed? Thanks much.

[Isomorphic]

This one has already been fixed and confirmed fixed by users (in another thread). You need the latest nightly.

[SimonF]

This issue still occurs with the latest nightly SmartClient_v111p_2017-10-09_Pro in Firefox 55.0.3 (32-Bit), Firefox 56.0 (32-Bit), Firefox 56.0.1 (64-Bit).
It is displayed correct in the latest Chrome Version (61.0.3163.100) and Internet Explorer (11).


Best regards

[Isomorphic]

We've tried to reproduce this on both FF 56.0 and 56.0.1, on both Windows and Mac machines, using the 11.1p nightly build from 10/9 without success.
Our process to test is to take the sample code from post #6 above, paste it into a new SmartClient enabled HTML page, with the Tahoe skin, clear browser cache and hit / refresh the page, then roll over the buttons.
We simply aren't seeing the shrinking effect in your screenshot.

Can you confirm which OS you're testing on.
Also it's probably worth sharing the entire source of the HTML page you're using to test this in case it differs in some subtle way from what we have.

Thanks
Isomorphic Software

[SimonF]

Sure.
With the code below i can reproduce the issue shown in #12

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<SCRIPT SRC="/isomorphic/system/modules/ISC_Core.js"></SCRIPT>
<SCRIPT SRC="/isomorphic/system/modules/ISC_Foundation.js"></SCRIPT>
<SCRIPT SRC="/isomorphic/system/modules/ISC_Containers.js"></SCRIPT>
<SCRIPT SRC="/isomorphic/system/modules/ISC_Grids.js"></SCRIPT>
<SCRIPT SRC="/isomorphic/system/modules/ISC_Forms.js"></SCRIPT>
<SCRIPT SRC="/isomorphic/system/modules/ISC_DataBinding.js"></SCRIPT>
<SCRIPT SRC="/isomorphic/system/modules/ISC_Drawing.js"></SCRIPT>
<SCRIPT SRC="/isomorphic/system/modules/ISC_Charts.js"></SCRIPT>
<SCRIPT SRC="/isomorphic/system/modules/ISC_Calendar.js"></SCRIPT>
<SCRIPT SRC="/isomorphic/skins/Tahoe/load_skin.js"></SCRIPT>

<head>
<body>
<script></script>
<script>
Canvas.resizeControls(4);Canvas.resizeFonts(2);
isc.ToolStrip.create({
    "ID": "theToolstrip",
    "width": "100%",
    "members":
    [
        isc.Button.create({
            "ID": "theShortButton",
            "overflow": "visible",
            "title": "short text",
            "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png",
        }),
        isc.Button.create({
            "ID": "theLongButton",
            "overflow": "visible",
            "title": "longer Text Example",
            "iconSize": 16,
            "iconWidth": 16,
            "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png"
        })
    ]
})
</script>
</body>
</html>

Best regards

[Isomorphic]

Hi Simon
We've tried your sample HTML file against multiple Firefox environments and are unable to reproduce the behavior you're seeing.
It's possible that there's something specific about your environment that is responsible for the problem (display density and zoom, browser plugins browser configuration, network latency loading the media, etc)

We *are* reproducing something similar in Safari, and are looking at resolving that. We'll follow up when we have a handle on that - possibly it'll resolve the issue you're seeing as well.

Regards
Isomorphic Software