Configure JavaFX bandwidth scrolling. Eliminate the extra square when both scroll bars are activated

Question

I create the following scrollbar setting as in the image below

I used the following CSS

.text-area, .text-area .viewport, .text-area .content {
    -fx-background-color: transparent ;
}

.text-area .scroll-bar {
    -fx-background-color:transparent;
}

.text-area .scroll-bar:vertical {
    -fx-background-color:transparent;
}

.text-area .scroll-bar:horizontal {
    -fx-background-color:transparent;
}

.text-area .scroll-bar .thumb {
    -fx-background-color:derive(black, 50%);
}

.text-area .scroll-bar .thumb:hover {
    -fx-background-color:derive(black, 70%);
}

.text-area .increment-button:hover ,.text-area .decrement-button:hover {
    -fx-background-color:transparent;
}

.text-area .track  {
    -fx-background-color:transparent;
}

How can I eliminate this extra ugly square that appears when both scroll bars are activated?

Thanks so much for your time.

Decision Inspired by Moon Answer

.text-area .scroll-pane .corner {    
    -fx-background-color: transparent ;
}

Answer 1

The property name of the 2 squares you see is called .filler and .corner. You can apply any color you want to them via css to make them invisible. I do not know if they can be deleted.

:.scroll-bar.filler {your color} :.scroll-bar.corner {your color}