Re-draw issue on scaling

[lanthale]

I have in my PhotoSlide app a zoom slider for the gridview. The zoom slider increases the size of the stackpanes where inside icons are added. During zoom the icon represantation is changed to the stanard one (menu buttton) and than back to the given icon. This is only happening during the zoom. What I mean you drag the slider and the stackpanes are increased and redrawn. During this process the burger icon is shown for the icons used and after the zoom finishes the icons are back as before.

It is a very small issue but the user sees it which is bad.
Thank you for your help in advance.
Clemens

[aalmiray]

I'm afraid I don't quite follow what's the problem.

1. During zoom an icon changes to a different shape/glyph but comes back to the original shape/glyph when zoom stops.
2. During zoom an icon changes size but comes back to the original size when zoom stops.

[lanthale]

The issue is that during zoom the icon changes to a default glyph and at the end of the zoom the defined glyph is shown.

Point 2 from your explaination

[JonathanVusich]

@aalmiray I have also run into the issue when using these icons in a JavaFX TableView. The icons looks like a rectangle while scrolling, but are drawn correctly when the scrolling stops. It only happens when the scrolling is quite fast, such as dragging the scroll slider around. Still kind of an annoying bug.

[johantiden]

I get the same behavior when refreshing a TableView with new (identical) content, re-initializing the icons. The burger glyph shows up momentarily, causing all icons in the table to flicker.

It would be better if the default glyph was empty so that at least it isn't larger than my other icons. I would rather have them flicker "to transparent" than to a big white blob.

[johantiden]

ui-glicth.mov

[johantiden]

I can reproduce it by:

• Initiating the FontIcon in TableColumn.setCellValueFactory lambda
• Clearing the table and filling it again with new rows. This causes the cells to be reused/replaced rather than being initiated from scratch.

        Pane pane = new VBox();
        Button refresh = new Button("Refresh");
        pane.getChildren().add(refresh);

        TableView<Integer> tableView = new TableView<>();
        TableColumn<Integer, Node> col = new TableColumn<>("Node");
        col.setPrefWidth(100);
        col.setCellValueFactory(param -> {
            FontIcon fontIcon = new FontIcon("mdi2m-magnify");
            return new ReadOnlyObjectWrapper<>(fontIcon);
        });
        tableView.getColumns().add(col);

        AtomicInteger counter = new AtomicInteger();
        refresh.setOnAction(event -> {
            tableView.getItems().clear();
            for (int i = 0; i < 5; i++) {
                tableView.getItems().add(0, counter.getAndIncrement());
            }
        });
        pane.getChildren().add(tableView);

screengrab.mp4

[johantiden]

If I set a breakpoint in the iconSize listener at FontIcon:131, I can see the default behavior frozen in the gui, until the pulse is completed. Notice the stack trace comes from the css processor

[johantiden]

To be fair, the flickering is there even if I just use a Text instead of FontIcon.

My workaround for now will be to use a Text directly, it doesn't produce the box when the font isn't setup yet, resulting in an "empty" icon until loaded:

    public static Node createIcon(String code, int fontSize, Color white) {
        return createIcon(resolve(code), fontSize, white);
    }

    public static Node createIcon(Ikon ikon, int fontSize, Color color) {
        Text text = new Text(getIconCode(ikon));
        text.setFont(Font.font("Material Design Icons", fontSize));
        text.setFill(color);
        return  text;
    }

    private static Ikon resolve(String ikon) {
        return IkonResolver.getInstance().resolve(ikon).resolve(ikon);
    }

    // Copy pasted from org.kordamp.ikonli.javafx.FontIcon
    public static String getIconCode(Ikon ikon) {
        int code = ikon.getCode();
        if (code <= '\uFFFF') {
            return String.valueOf((char) code);
        } else {
            char[] charPair = Character.toChars(code);
            return new String(charPair);
        }
    }
    ```