Run the code below + stylesheet.

What you will see is that the right panel (which has Lighting applied) has clear horizontal line artifacts. The left panel (with lighting removed) has a similar pattern, but much less obvious.

I'm thinking this may be caused the lack of gray shades (24-bit color), and the lighting is making it worse by highlighting the transistions...

Is there something I can do to fix this, is this a bug, or just an artifact inherent in 24-bit color displays?


package hs.mediasystem;

import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.effect.BlurType;
import javafx.scene.effect.DropShadow;
import javafx.scene.effect.Light;
import javafx.scene.effect.Lighting;
import javafx.scene.effect.Reflection;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

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

  @Override
  public void start(Stage stage) throws Exception {
    DuoPaneStandardLayout pane = new DuoPaneStandardLayout();

    stage.setScene(new Scene(pane));
    stage.setWidth(800);
    stage.setHeight(600);
    stage.show();
  }

  public class DuoPaneStandardLayout extends StackPane {
    public DuoPaneStandardLayout() {
      getStylesheets().add("test.css");

      final StackPane listPane = new StackPane();
      final StackPane detailPane = new StackPane();

      detailPane.getStyleClass().add("box-content");
      listPane.getStyleClass().add("box-content");

      final GridPane root = GridPaneUtil.create(new double[] {100}, new double[] {17, 75, 8});
      final GridPane panelGroup = GridPaneUtil.create(new double[] {50, 50}, new double[] {100});

      panelGroup.getStyleClass().addAll("content-box-grid");

      root.add(panelGroup, 0, 1);

      detailPane.setEffect(new DropShadow(BlurType.THREE_PASS_BOX, Color.BLACK, 3, 0.0, 0, 0));
      ((Node)listPane).setEffect(new DropShadow(BlurType.THREE_PASS_BOX, Color.BLACK, 3, 0.0, 0, 0));

      panelGroup.setEffect(new Reflection(5, 0.025, 0.25, 0.0));

      panelGroup.add(new StackPane() {{
        getChildren().add(new StackPane() {{
          getStyleClass().add("box");
        }});
        getChildren().add(detailPane);
      }}, 0, 0);

      panelGroup.add(new StackPane() {{
        getChildren().add(new StackPane() {{
          getStyleClass().add("box");
          setEffect(new Lighting(new Light.Distant(-135.0, 30.0, Color.WHITE)) {{
            setSpecularConstant(1.5);
            setSurfaceScale(2.0);
          }});
        }});
        getChildren().add(listPane);
      }}, 1, 0);

      getChildren().add(root);
    }
  }

  public static class GridPaneUtil {
    public static GridPane create(double[] columns, double[] rows) {
      GridPane gridPane = new GridPane();

      for(double column : columns) {
        ColumnConstraints constraints = new ColumnConstraints();

        constraints.setPercentWidth(column);

        gridPane.getColumnConstraints().add(constraints);
      }

      for(double row : rows) {
        RowConstraints constraints = new RowConstraints();

        constraints.setPercentHeight(row);

        gridPane.getRowConstraints().add(constraints);
      }

      return gridPane;
    }
  }
}



.root {
  -c-base: rgb(173, 216, 230);
  
  -c-text: -c-base;
  -c-text-highlight: derive(-c-base, +75%);
  -c-text-focused: derive(-c-base, +75%);
  -c-text-unobtrusive: derive(-c-base, -30%);
  
  -c-shadow-highlight: derive(-c-base, -50%);
  color-blue-80: rgba(173, 216, 230, 0.8);
  color-content-background: derive(color-blue-80, -90%);
  
  -fx-font-family: "Arial";
  -fx-font-size: 16pt;
  -fx-font-weight: normal;
}

.content-box-grid {
  -fx-padding: 15 35 0 35;
  -fx-hgap: 35;
  -fx-vgap: 0;
}

.box {
  -c-border: color-content-background;
  -c-bg: color-content-background;
  
  -c-b1: derive(-c-border, +225%);
  -c-b2: derive(-c-border, +85%);
  -c-b3: derive(-c-border, +55%);

  -c-bg1: derive(-c-bg, 5%);
  -c-bg2: derive(-c-bg, -100%);
  -c-bg3: derive(-c-bg, -160%);

  -fx-border-color:
    linear-gradient(to right, -c-b2, -c-b1, -c-b2) linear-gradient(to bottom, -c-b2, -c-b3 25%, -c-b1 50%, -c-b3 75%, -c-b2) linear-gradient(to right, -c-b2, -c-b1, -c-b2) linear-gradient(to bottom, -c-b2, -c-b3 25%, -c-b1 50%, -c-b3 75%, -c-b2)
  ;

  -fx-border-radius: 25;
  -fx-border-width: 1.5;

  -fx-background-color:
    linear-gradient(from 25% 0% to 75% 100%, -c-bg3, -c-bg1 28%, -c-bg2 68%, -c-bg3),
    linear-gradient(to bottom, rgba(0, 0, 0, 0), derive(-c-base, -100%))
  ;
  
  -fx-background-radius: 24, 24;
  -fx-background-insets: 1, 1;
}

.box-content {
  -fx-padding: 30;
  -fx-hgap: 20;
}