Why JavaFX blurs controls and how to fix it? - javafx

Question

I have this simple form of JavaFX application with two TextArea without style properties:
When viewing the form I see this:
FXML code here:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<TitledPane animated="false" prefWidth="300.0" text="untitled" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<content>
<TextArea prefHeight="200.0" prefWidth="200.0" />
</content>
</TitledPane>
<SplitPane dividerPositions="0.5" orientation="VERTICAL" prefHeight="200.0" prefWidth="160.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="300.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<TitledPane animated="false" text="untitled" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<TextArea prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="-10.0" AnchorPane.leftAnchor="-10.0" AnchorPane.rightAnchor="-10.0" AnchorPane.topAnchor="-10.0" />
</children>
</AnchorPane>
</content>
</TitledPane>
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0" />
</items>
</SplitPane>
</children>
</AnchorPane>
The text in the first TextArea blurred. Why it happens and how to fix it?

Answer 1

The problem occurs when you are using this combination: TitledPane -> AnchorPane (It does not matter which elements are embedded into the AnchorPane). When you are using the AnchorPane Constraints tool, nested elements are getting artifacts of the values of the Width, Height, LayoutBounds, BoundsInLocal and BoundsInParent. These artifacts affect the blur.
No constrains:
There are constrains:
For solving the problem don’t use combination TitledPane-> AnchorPane or don’t use tool AnchorPane Constraints.

Answer 2

You have wrapped the TextArea in the SplitPane in another AnchorPane. If you delete that the blur is gone. I don't know why but I could get it to work with this code.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0"
prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<TitledPane animated="false" prefWidth="300.0" text="test2" AnchorPane.bottomAnchor="0.0"
AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<TextArea prefHeight="200.0" prefWidth="200.0"/>
</TitledPane>
<SplitPane dividerPositions="0.5" orientation="VERTICAL" prefHeight="200.0" prefWidth="160.0"
AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="300.0"
AnchorPane.topAnchor="0.0">
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<TitledPane animated="false" text="test" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0"
AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
//deleted AnchorPane here
<TextArea prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="-10.0"
AnchorPane.leftAnchor="-10.0" AnchorPane.rightAnchor="-10.0"
AnchorPane.topAnchor="-10.0"/>
</TitledPane>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0"/>
</SplitPane>
</AnchorPane>