Uploaded image for project: 'JDK'
  1. JDK
  2. JDK-8284329

Weird corners in Tab headers in JavaFX

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: P3 P3
    • tbd
    • jfx11, 8, jfx17, jfx18, jfx19
    • javafx
    • x86_64
    • linux

      A DESCRIPTION OF THE PROBLEM :
      JavaFX draws strange pieces in round corners of Tab headers. The problem was also discussed on SO https://stackoverflow.com/questions/71665510/weird-corners-in-tab-headers-in-javafx

      STEPS TO FOLLOW TO REPRODUCE THE PROBLEM :
      This is CSS code:

      .tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
          -fx-alignment: center;
          -fx-text-fill: -fx-text-base-color;
          -fx-padding:0 10 0 0;
          -fx-font-size: 15px;
      }

      .tab-header-area .tab {
          -fx-padding:4 10 5 10;
          -fx-border-radius: 10 10 0 0;
          -fx-background-radius: 10 10 0 0;
      }

      This is Java code:

      public class JavaFxTest1 extends Application {
          public static void main(String[] args) {
              launch(args);
          }

          @Override
          public void start(Stage primaryStage) {
              var tabPane = new TabPane();
              VBox.setVgrow(tabPane, Priority.ALWAYS);
              primaryStage.setTitle("Hello World!");
              Button button = new Button();
              button.setText("NewTab");
              button.setOnAction(new EventHandler<ActionEvent>() {

                  @Override
                  public void handle(ActionEvent event) {
                      Tab tab = new Tab("New tab");
                      var content = new VBox();
                      tab.setContent(content);
                      var splitPane = new SplitPane();
                      VBox.setVgrow(splitPane, Priority.ALWAYS);
                      content.getChildren().add(splitPane);
                      splitPane.getItems().addAll(new TextArea("One two three"), new TextArea("One two three"));
                      tabPane.getTabs().add(tab);
                  }
              });

              VBox root = new VBox();
              root.getChildren().addAll(tabPane, button);
              var css= this.getClass().getResource("test1.css").toExternalForm();
              var scene = new Scene(root, 800, 600);
              scene.getStylesheets().add(css);
              primaryStage.setScene(scene);
              primaryStage.show();
          }
      }

      EXPECTED VERSUS ACTUAL BEHAVIOR :
      EXPECTED -
      Round corners of the Tab without any extra pieces.
      ACTUAL -
      I tested in Windows (Win7, java 18, JavaFX: 19-ea+3):
      And in Ubuntu (Ubuntu 20.04.3 LTS, openjdk version "14.0.2" 2020-07-1, JavaFX: 19-ea+3 for linux):

      FREQUENCY : often


        1. JavaFxTest1.java
          2 kB
        2. capture.pptx
          10.67 MB
        3. Capture_Windows.PNG
          Capture_Windows.PNG
          22 kB
        4. Capture_Ubuntu.PNG
          Capture_Ubuntu.PNG
          21 kB

            arapte Ambarish Rapte
            webbuggrp Webbug Group
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated: