JavaFX: Node re-size is not working as expected

I have defined an FXML with a GridPane of 8 rows, which holds the following components (FXML and CSS definitions are given at the end of this thread):

• 2 CheckBoxes,
• 2 Labels,
• 2 Labels With a Region and
• 2 Buttons with A Region

The Region here is used to load images into, which is done through a CSS style. For each set of the components defined above (for example the 2 Checkboxes), I take the one and I increased it's size by using the -fx-font-size styling. In particular, I define the font size to be "1.3xDefault_System_Font_Size (12)". The tags (INC) and (DEF) in text of each component, is used to describe whether the font size is increased or left to the default value.

As you can see from the above screenshot, the label of checkbox is increased but the box itself did not. The same applies for the images, that their size did not increase but the label size did.

This gets worse when I change the default font size in .root:

.root{
    -fx-font-size: 28;
}

In the example above, since I changed the default font size from 12 to 28, I expect all labels and images to change their size according to this new size. The image size is defined by the -fx-background-size which is 4em.

However, all the labels are increased correctly but the images are increased correctly only on those nodes with the DEF tag. The same applies for the checkbox, where it's label and box is increased on the DEF, whilst the one with the INC tag only label size increased correctly and the box remained small.

Is there a way to make images and box of checkbox to increase their size correctly? Is this a bug, or am I doing something wrong?

FXML: Gridpane

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane stylesheets="@css/Test.css" vgap="5.0" xmlns="http://ift.tt/19NWjX5" xmlns:fx="http://ift.tt/1cgvoBb" fx:controller="ebay.client.controller.SettingsScreenController">
    <children>
        <CheckBox nodeOrientation="RIGHT_TO_LEFT" styleClass="increased_font" text="CheckBox (Inc)" GridPane.rowIndex="1" />
        <CheckBox nodeOrientation="RIGHT_TO_LEFT" text="CheckBox (Def)" GridPane.rowIndex="2" />
        <Label cache="true" styleClass="increased_font" text="Label (Inc)" GridPane.rowIndex="3" />
        <Label cache="true" text="Label (Def)" GridPane.rowIndex="4" />
        <Label cache="true" styleClass="increased_font" text="Label With Image (Inc)" GridPane.rowIndex="5">
            <graphic><Region styleClass="javasuns_logo" /></graphic>
        </Label>
        <Label cache="true" text="Label With Image (Def)" GridPane.rowIndex="6">
            <graphic><Region styleClass="javasuns_logo" /></graphic>
        </Label>
        <Button styleClass="increased_font" text="Button With Image (Inc)" GridPane.rowIndex="7">
            <graphic><Region styleClass="javasuns_logo" /></graphic>
        </Button>
        <Button text="Button With Image (Def)" GridPane.rowIndex="8">
            <graphic><Region styleClass="javasuns_logo" /></graphic>
        </Button>
    </children>
</GridPane>

CSS: Test.css

.increased_font {
    -fx-font-size: 1.3em;
}

.javasuns_logo {
    -fx-font-size: null;
    -fx-pref-height: 2em;
    -fx-pref-width: 4em;
    -fx-background-image: url('../../icons/logo/javasuns.png');
    -fx-background-size: 4em;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
}