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

Blurring 1px border

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Duplicate
    • Icon: P3 P3
    • tbd
    • 8, 9
    • javafx
    • x86_64
    • windows_7

      FULL PRODUCT VERSION :
      Java(TM) SE Runtime Environment build 1.8.0_60

      ADDITIONAL OS VERSION INFORMATION :
      Windows 7 64-bit,
      Ubuntu 14.04
      MacOS 10.10

      A DESCRIPTION OF THE PROBLEM :
      I've found a very strange thing about JavaFX and borders.

      If an element has "-fx-border-width: 1 1 1 1;", then the border will be a bit blur (not exactly 1px).
      But if it's declared as "-fx-border-width: 0 1 1 1;", then the border is perfectly sharp (exactly 1px).


      REPRODUCIBILITY :
      This bug can be reproduced always.

      ---------- BEGIN SOURCE ----------
      SharpAndBlur.java

      import javafx.application.Application;
      import javafx.scene.Scene;
      import javafx.scene.control.Label;
      import javafx.scene.layout.HBox;
      import javafx.stage.Stage;

      public class SharpAndBlur extends Application {

      @Override
      public void start(Stage primaryStage) throws Exception {
      HBox box = new HBox();
      box.setId("box");

      Label sharp = new Label("I am sharp");
      sharp.getStyleClass().add("label");
      sharp.setId("sharp");

      Label blur = new Label("I am blur");
      blur.getStyleClass().add("label");
      blur.setId("blur");

      box.getChildren().addAll(sharp, blur);

      Scene scene = new Scene(box, 300, 200);
      scene.getStylesheets().add(SharpAndBlur.class.getResource("SharpAndBlur.css").toExternalForm());
                      primaryStage.setScene(scene);
      primaryStage.show();
      }

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

      }

      SharpAndBlur.css

      #box {
      -fx-background-color:linear-gradient(#56595a, #3f4143);
      -fx-alignment: center;
      -fx-spacing: 20;
      }

      .label {
      -fx-min-height: 29px;
        -fx-pref-height: 29px;
        -fx-max-height: 29px;
      -fx-padding:0 15 1 15;

      -fx-alignment: center;
      -fx-font-size:13px;
         -fx-cursor: hand;

        -fx-background-color: transparent;
      -fx-background-insets: 0;
      -fx-background-radius: 2;

        -fx-border-color: rgba(234,234,234);
        -fx-border-insets: 0;
      -fx-border-radius: 2;
      }

      #sharp {
      -fx-border-width: 1 0 1 1;
      }

      #blur {
        -fx-border-width: 1 1 1 1;
      }

      ---------- END SOURCE ----------

      CUSTOMER SUBMITTED WORKAROUND :
      As a workaround I defined border as: -fx-border-width: 0 1 1 1, 1 0 0 0;
      But if the border has rounded corners, this workaround (even with border-insets) produces different rounded corners.

            vadim Vadim Pakhnushev
            webbuggrp Webbug Group
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:
              Resolved: