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

Severe graphical glitches when using GridPanes and ScrollPane

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Duplicate
    • Icon: P4 P4
    • None
    • 8u51
    • javafx
    • x86
    • windows_8

      FULL PRODUCT VERSION :
      java version "1.8.0_51"
      Java(TM) SE Runtime Environment (build 1.8.0_51-b16)
      Java HotSpot(TM) 64-Bit Server VM (build 25.51-b03, mixed mode)

      ADDITIONAL OS VERSION INFORMATION :
      Windows 8.1 Pro 64-bit

      EXTRA RELEVANT SYSTEM CONFIGURATION :
      NVIDIA GeForce GTX 970 - Driver version: 353.62

      A DESCRIPTION OF THE PROBLEM :
      Severe graphical glitches occur when using a certain combination of GridPanes and a ScrollPane: when many GridPanes are placed each inside a row of a parent GridPane, which is inside a ScrollPane. Upon scrolling, GridPanes and nodes inside them begin clipping, making it practically impossible to use the application. However, the bug seems to lye on using padding for the ScrollPane. If the ScrollPane has padding greater than 5 (at least according to my testing), the bug occurs. If it is less than 5, everything works perfectly. In summary: GridPanes placed in the rows of parent GridPane which is inside ScrollPane with padding greater than 5 causes graphical glitches.

      STEPS TO FOLLOW TO REPRODUCE THE PROBLEM :
      Run the test case, and scroll the ScrollPane. The glitches will begin immediately.

      EXPECTED VERSUS ACTUAL BEHAVIOR :
      EXPECTED -
      Scrolling the ScrollPane should not cause nodes to clip.
      ACTUAL -
      Nodes inside the ScrollPane begin clipping, making the application practically unusable.

      REPRODUCIBILITY :
      This bug can be reproduced always.

      ---------- BEGIN SOURCE ----------
      //Main.java used:

      package application;

      import javafx.application.Application;
      import javafx.fxml.FXMLLoader;
      import javafx.stage.Stage;
      import javafx.scene.Parent;
      import javafx.scene.Scene;

      public class Main extends Application {
      @Override
      public void start(Stage primaryStage) {
      try {
      FXMLLoader loader = new FXMLLoader();
      loader.setLocation(getClass().getResource("window.fxml"));
      Parent root = loader.load();
      Scene scene = new Scene(root,600,400);
      primaryStage.setScene(scene);
      primaryStage.show();
      } catch(Exception e) {
      e.printStackTrace();
      }
      }

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

      //window.fxml used (this is where the problem lyes):

      <?xml version="1.0" encoding="UTF-8"?>

      <?import javafx.geometry.*?>
      <?import javafx.scene.text.*?>
      <?import javafx.scene.control.*?>
      <?import java.lang.*?>
      <?import javafx.scene.layout.*?>
      <?import javafx.scene.layout.AnchorPane?>
      <?import javafx.scene.text.Text?>

      <BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
      <center>
      <ScrollPane fitToWidth="true" hbarPolicy="NEVER" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #1a1a1a; -fx-Background: #1a1a1a;" BorderPane.alignment="CENTER">
      <content>
      <GridPane>
      <columnConstraints>
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
      <RowConstraints vgrow="ALWAYS" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints vgrow="SOMETIMES" />
      </rowConstraints>
      <children>
      <GridPane style="-fx-background-color: #a9a9a9;">
      <columnConstraints>
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      <ColumnConstraints halignment="RIGHT" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints />
      </rowConstraints>
      <children>
      <Label text="Example Title">
      <font>
      <Font size="14.0" />
      </font>
      </Label>
      <TextFlow GridPane.rowIndex="1" GridPane.valignment="CENTER">
      <Text text="This is an example of a description. This sentence is only here to make the TextFlow box longer, and therefore more realistic." />
      </TextFlow>
      <Label text="Example category" GridPane.columnIndex="1" GridPane.rowSpan="2" />
      </children>
      </GridPane>
      <GridPane style="-fx-background-color: #a9a9a9;" GridPane.rowIndex="2">
      <columnConstraints>
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      <ColumnConstraints halignment="RIGHT" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints />
      </rowConstraints>
      <children>
      <Label text="Example Title">
      <font>
      <Font size="14.0" />
      </font>
      </Label>
      <TextFlow GridPane.rowIndex="1" GridPane.valignment="CENTER">
      <children>
      <Text text="This is an example of a description. This sentence is only here to make the TextFlow box longer, and therefore more realistic." />
      </children>
      </TextFlow>
      <Label text="Example category" GridPane.columnIndex="1" GridPane.rowSpan="2" />
      </children>
      </GridPane>
      <GridPane style="-fx-background-color: #a9a9a9;" GridPane.rowIndex="4">
      <columnConstraints>
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      <ColumnConstraints halignment="RIGHT" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints />
      </rowConstraints>
      <children>
      <Label text="Example Title">
      <font>
      <Font size="14.0" />
      </font>
      </Label>
      <TextFlow GridPane.rowIndex="1" GridPane.valignment="CENTER">
      <children>
      <Text text="This is an example of a description. This sentence is only here to make the TextFlow box longer, and therefore more realistic." />
      </children>
      </TextFlow>
      <Label text="Example category" GridPane.columnIndex="1" GridPane.rowSpan="2" />
      </children>
      </GridPane>
      <GridPane style="-fx-background-color: #a9a9a9;" GridPane.rowIndex="6">
      <columnConstraints>
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      <ColumnConstraints halignment="RIGHT" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints />
      </rowConstraints>
      <children>
      <Label text="Example Title">
      <font>
      <Font size="14.0" />
      </font>
      </Label>
      <TextFlow GridPane.rowIndex="1" GridPane.valignment="CENTER">
      <children>
      <Text text="This is an example of a description. This sentence is only here to make the TextFlow box longer, and therefore more realistic." />
      </children>
      </TextFlow>
      <Label text="Example category" GridPane.columnIndex="1" GridPane.rowSpan="2" />
      </children>
      </GridPane>
      <GridPane style="-fx-background-color: #a9a9a9;" GridPane.rowIndex="8">
      <columnConstraints>
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      <ColumnConstraints halignment="RIGHT" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints />
      </rowConstraints>
      <children>
      <Label text="Example Title">
      <font>
      <Font size="14.0" />
      </font>
      </Label>
      <TextFlow GridPane.rowIndex="1" GridPane.valignment="CENTER">
      <children>
      <Text text="This is an example of a description. This sentence is only here to make the TextFlow box longer, and therefore more realistic." />
      </children>
      </TextFlow>
      <Label text="Example category" GridPane.columnIndex="1" GridPane.rowSpan="2" />
      </children>
      </GridPane>
      <GridPane style="-fx-background-color: #a9a9a9;" GridPane.rowIndex="10">
      <columnConstraints>
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      <ColumnConstraints halignment="RIGHT" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints />
      </rowConstraints>
      <children>
      <Label text="Example Title">
      <font>
      <Font size="14.0" />
      </font>
      </Label>
      <TextFlow GridPane.rowIndex="1" GridPane.valignment="CENTER">
      <children>
      <Text text="This is an example of a description. This sentence is only here to make the TextFlow box longer, and therefore more realistic." />
      </children>
      </TextFlow>
      <Label text="Example category" GridPane.columnIndex="1" GridPane.rowSpan="2" />
      </children>
      </GridPane>
      <GridPane style="-fx-background-color: #a9a9a9;" GridPane.rowIndex="12">
      <columnConstraints>
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      <ColumnConstraints halignment="RIGHT" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints />
      </rowConstraints>
      <children>
      <Label text="Example Title">
      <font>
      <Font size="14.0" />
      </font>
      </Label>
      <TextFlow GridPane.rowIndex="1" GridPane.valignment="CENTER">
      <children>
      <Text text="This is an example of a description. This sentence is only here to make the TextFlow box longer, and therefore more realistic." />
      </children>
      </TextFlow>
      <Label text="Example category" GridPane.columnIndex="1" GridPane.rowSpan="2" />
      </children>
      </GridPane>
      <GridPane style="-fx-background-color: #a9a9a9;" GridPane.rowIndex="14">
      <columnConstraints>
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      <ColumnConstraints halignment="RIGHT" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints />
      </rowConstraints>
      <children>
      <Label text="Example Title">
      <font>
      <Font size="14.0" />
      </font>
      </Label>
      <TextFlow GridPane.rowIndex="1" GridPane.valignment="CENTER">
      <children>
      <Text text="This is an example of a description. This sentence is only here to make the TextFlow box longer, and therefore more realistic." />
      </children>
      </TextFlow>
      <Label text="Example category" GridPane.columnIndex="1" GridPane.rowSpan="2" />
      </children>
      </GridPane>
      <GridPane style="-fx-background-color: #a9a9a9;" GridPane.rowIndex="16">
      <columnConstraints>
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      <ColumnConstraints halignment="RIGHT" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints />
      </rowConstraints>
      <children>
      <Label text="Example Title">
      <font>
      <Font size="14.0" />
      </font>
      </Label>
      <TextFlow GridPane.rowIndex="1" GridPane.valignment="CENTER">
      <children>
      <Text text="This is an example of a description. This sentence is only here to make the TextFlow box longer, and therefore more realistic." />
      </children>
      </TextFlow>
      <Label text="Example category" GridPane.columnIndex="1" GridPane.rowSpan="2" />
      </children>
      </GridPane>
      <GridPane style="-fx-background-color: #a9a9a9;" GridPane.rowIndex="18">
      <columnConstraints>
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      <ColumnConstraints halignment="RIGHT" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
      <RowConstraints vgrow="SOMETIMES" />
      <RowConstraints />
      </rowConstraints>
      <children>
      <Label text="Example Title">
      <font>
      <Font size="14.0" />
      </font>
      </Label>
      <TextFlow GridPane.rowIndex="1" GridPane.valignment="CENTER">
      <children>
      <Text text="This is an example of a description. This sentence is only here to make the TextFlow box longer, and therefore more realistic." />
      </children>
      </TextFlow>
      <Label text="Example category" GridPane.columnIndex="1" GridPane.rowSpan="2" />
      </children>
      </GridPane>
      <Pane minHeight="15.0" GridPane.rowIndex="1" />
      <Pane minHeight="15.0" GridPane.rowIndex="3" />
      <Pane minHeight="15.0" GridPane.rowIndex="5" />
      <Pane minHeight="15.0" GridPane.rowIndex="7" />
      <Pane minHeight="15.0" GridPane.rowIndex="9" />
      <Pane minHeight="15.0" GridPane.rowIndex="11" />
      <Pane minHeight="15.0" GridPane.rowIndex="13" />
      <Pane minHeight="15.0" GridPane.rowIndex="15" />
      <Pane minHeight="15.0" GridPane.rowIndex="17" />
      </children>
      </GridPane>
      </content>
               <opaqueInsets>
                  <Insets />
               </opaqueInsets>
               <padding>
                  <Insets bottom="7.5" left="7.5" right="7.5" top="7.5" />
               </padding>
      </ScrollPane>
      </center>
      </BorderPane>
      ---------- END SOURCE ----------

      CUSTOMER SUBMITTED WORKAROUND :
      Apply the padding to the parent GridPane instead of the ScrollPane

            ckyang Chien Yang (Inactive)
            webbuggrp Webbug Group
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved: