StrokeType.OUTSIDE causes high amounts of lag when used on a label inside a ScrollPane

Question

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        ScrollPane scrollPane = new ScrollPane();
        VBox vbox = new VBox();

        for (int i = 0; i < 50; i++) {
            Label label = new Label("Label " + i);
            label.getStyleClass().add("test");
            vbox.getChildren().add(label);
        }

        scrollPane.setContent(vbox);

        Scene scene = new Scene(scrollPane, 500, 500);
        primaryStage.setScene(scene);
        scene.getStylesheets().add("/style.css");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

style.css:

.test.label .text {
    -fx-fill: white;
    -fx-stroke: red;
    -fx-stroke-type: outside;
}

JDK and JavaFX 13

The labels render just fine but when I try to scroll it lags really much.

I expect it to be as smooth as it is when used without -fx-stroke-type: outside;, for example, replacing the contents of style.css with

.test.label .text {
    -fx-fill: white;
    -fx-stroke: red;
    /* -fx-stroke-type: outside; */
}

fixes the scrolling lag but the stroke overlaps the fill as it is drawn inside of the text.

I've tried running with Java and JavaFX 11 as well but there was no difference.

Answer 1

I worked out how to get better performance on the scrolling without using Nand's work-around. I used some of the advice from this question:

• JavaFx animation poor performance, consumes all my CPU

Specifically, the advice to cache nodes:

node.setCache(true);
node.setCacheShape(true);
node.setCacheHint(CacheHint.SPEED);

Once I added these function calls to the labels generated in Nand's test program, scrolling performance was perfectly fine (rather than visibly incredibly laggy).

The initial drawing of the scene, before the rendering is cached is a bit slow (it takes a second or so). The slowness of the initial drawing can be best observed if you increase the number of labels from 50 to 500. But, once the scene has been drawn once and the nodes cached, scrolling no longer slows down the frames per second performance of the application.

In context, this solution is:

public void start(Stage primaryStage) {
    ScrollPane scrollPane = new ScrollPane();
    VBox vbox = new VBox();

    for (int i = 0; i < 500; i++) {
        Label label = new Label("Label " + i);
        label.getStyleClass().add("test");
        vbox.getChildren().add(label);

        label.setCache(true);
        label.setCacheShape(true);
        label.setCacheHint(CacheHint.SPEED);
    }

    scrollPane.setContent(vbox);

    Scene scene = new Scene(scrollPane, 500, 500);
    primaryStage.setScene(scene);
    scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
    primaryStage.show();
}

where style.css is as supplied in the question.

To speed up the initial drawing of the scene you can use a drop shadow effect, which simulates the outline, providing a similar look. Different settings for the effect (e.g. using one-pass-box rather than gaussian), will provide slightly different rendering, so it is a bit customizable.

.shadow-outline.label .text {
    -fx-fill: white;
    -fx-effect: dropshadow(gaussian, red, 1, 1.0, 0, 0);
}