Why JavaFX blurs controls and how to fix it?

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?

Maybe you set `Prompt Text` instead of `Text` in your TextArea? Or set Blur Effect in Scene Builder? — MBec, Jan 31 '17 at 08:46
MBec, no, I didn't use any effects and I didn't set Prompt Text. James_D, add FXML code for you — gearquicker, Jan 31 '17 at 10:32

I.Dev · Accepted Answer · 2017-02-02T05:23:11.143

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.

score 1 · Answer 2 · answered Jan 31 '17 at 23:28

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>

Thanks for the answer. I know that the blur is due to the high embedding. This example was synthetically generated to show the problem. I want to know why this is happening. — gearquicker, Feb 01 '17 at 02:23
[This](http://stackoverflow.com/questions/22119479/adding-anchorpanes-to-scrollpanes-javafx-8) gives more insight when the blur happens. Still don't know what the cause is. — Nash, Feb 01 '17 at 08:45

Why JavaFX blurs controls and how to fix it?

2 Answers2