CSS effect causing positioning and sizing issues possible?

[Blama]

Hi Isomorphic,

I have an spurious client-side effect I can't explain using latest 5.1p and 6.1d.
Sometimes it appears, sometimes after a F5 it does not. I'd say I have it in about 10% of the page loads.

My application has a fixed width left side menu.
The menu consists of VLayouts with a inner HLayout (with inner Img) and a Label.
It also has MouseOverHandler and MouseOutHandler to create the hover effect.

public class NavigationButtonField extends VLayout {
    private static I18n i18n = GWT.create(I18n.class);

    public enum Mode {
        USERACCOUNT("[SKINIMG]LT/navigation/accounts", i18n.userAccount()),
...
...
...
        ;

        private String icon;
        private String title;

        private Mode(String icon, String title) {
            this.icon = icon;
            this.title = title;
        }

        public String getIcon() {
            return this.icon;
        }

        public String getTitle() {
            return this.title;
        }
    }

    final private static String iconExtension = ".png";
    private MainArea mainArea;
    private NavigationVLayout navigationVLayout;
    private Mode mode;
    private Label label;
    private Img img;
    private Boolean isClicked = false;

    public void setIsClicked(Boolean isClicked) {
        this.isClicked = isClicked;
    }

    public NavigationButtonField(final Mode mode, MainArea mainArea, NavigationVLayout navigationVLayout) {
        super(0);
        this.mainArea = mainArea;
        this.navigationVLayout = navigationVLayout;
        this.mode = mode;
        setHeight(80);
        setWidth(190);
        setOverflow(Overflow.HIDDEN);
        setAlign(Alignment.CENTER);
        setStyleName("menuButtonMouseNormal");

        HLayout hL = new HLayout(0) {
            {
                img = new Img(mode.getIcon() + iconExtension, 48, 48);
                img.setCursor(Cursor.HAND);
                img.addClickHandler(new FieldClickHandler());
                setHeight(48);
                setAlign(Alignment.CENTER);
                setMembers(img);
            }
        };
        label = new WhiteLabel(mode.getTitle()) {
            {
                setHeight(20);
                setAlign(Alignment.CENTER);
                setCursor(Cursor.HAND);
            }
        };
        label.addClickHandler(new FieldClickHandler());
        setMembers(hL, label);

        addMouseOverHandler(new MouseOverHandler() {
            @Override
            public void onMouseOver(MouseOverEvent event) {
                if (!isClicked) {
                    img.setSrc(mode.getIcon() + "_Rollover" + iconExtension);
                    setStyleName("menuButtonMouseOver");
                }
            }
        });

        addMouseOutHandler(new MouseOutHandler() {
            @Override
            public void onMouseOut(MouseOutEvent event) {
                if (!isClicked) {
                    img.setSrc(mode.getIcon() + iconExtension);
                    img.setHeight(48);
                    img.setWidth(48);
                    setStyleName("menuButtonMouseOut");
                }
            }
        });
    }

    public void resetDesign() {
        isClicked = false;
        img.setSrc(mode.getIcon() + iconExtension);
        img.setHeight(48);
        img.setWidth(48);
        setStyleName("menuButtonMouseOut");
    }

    public Mode getMode() {
        return mode;
    }

    public void click() {
        isClicked = true;
        img.setSrc(mode.getIcon() + "_Active" + iconExtension);
        img.setHeight(48);
        img.setWidth(48);
        setStyleName("menuButtonClicked");
        NavigationButtonField.this.navigationVLayout.resetButtonDesign(mode);
        NavigationButtonField.this.mainArea.openModule(mode);
    }

    private final class FieldClickHandler implements ClickHandler {
        @Override
        public void onClick(ClickEvent event) {
            NavigationButtonField.this.click();
        }
    }
}

The css is like this:

.menuButtonMouseNormal {
    font-weight: normal;
    background-color: inherit;
}
.menuButtonMouseOver, .menuButtonMouseOut {
    font-weight: normal;
/* Causes the jumping box issue
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
*/
}

.menuButtonMouseOver {
    background-color: #1C1E25;
}

.menuButtonMouseOut {
    background-color: inherit;
}

.menuButtonClicked {
    background-color: #1C1E25;
    font-weight: bold;
    background: transparent url(./images/LT/hover/menuhover.png) no-repeat
        right center;
}

Do you see any problem with the now commented out transition-CSS in .menuButtonMouseOver, .menuButtonMouseOut?
With your best guess: Could these rules interfere with some size-determination and positioning the framework does, causing the menu entries to jump or move a few pixels (mostly 3 pixels)?
If so, is it valid to use those rules? I'd then try to create a testcase.

Thank you & Best regards
Blama

[Isomorphic]

This is pretty bizarre..

You're saying that on about 10% of the page loads, a menu which is opened sometime after page load behaves differently? Is this also browser-specific, and if so, to what browser(s) on what platforms?

What exactly jumps? You refer to the menu entries, but the style is on the MenuButton, and the entries are inside in the related Menu. These elements wouldn't even be in the same DOM parent - their styling should be totally unrelated, so it seems very unlikely these CSS transition rules would be the culprit.

As far as the general question: if you applied a transition to some element that was supposed to do auto-sizing, then yes it might interfere if the auto-sizing logic tried to determine sizes at the wrong point in the transition (eg, before the element reaches its eventual size). But there wouldn't normally be auto-sizing going on in the midst of the MenuButton transitioning to it's Over state.

[Blama]

Hi Isomorphic,

to clarify: I'm talking of my self made left-hand navigation. No SmartGWT Menu class involved.
My navigation is build of stacked HLayouts, VLayouts and Labels.

The issue is not browser specific.

The strange thing is that my css only changes the background color, not the size of the menu entries.

I'll try to put a testcase together.

Best regards
Blama