JFXTabPane cosmetic drawing bug with Windows scaling

[LightSnowDev]

The JFXTabPane does render incorrectly with scaling in Windows 10. The line underneath the individual tabs is bigger than the tab itself.

125% and 150% scaling:

With 100% scaling everything is as expected:

This does not break any features or similar. It's just a cosmetic thing.

My setup: Windows 10 1803 Oracle Java 10.0.1 JFoenix 9.0.4

[jfoenixadmin]

@LightSnowDev thanks for pointing out the issue 👍

[jfoenixadmin]

@LightSnowDev unfortounetly I wasn't able to reproduce the issue, I tried to change the scale to 125% , 150% however no luck in reproducing the issue.

[LightSnowDev]

@jfoenixadmin I created the most simple project i could think of with IntelliJ IDEA. Just a fxml is being loaded. A controller is not used. Source code and the final jar as zip:

sample.zip generated jar.zip

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Ed1ks]

I can confirm the bug. JavaFX 11.0.2 JFoenix 9.0.9 Windows 10 Pro Windows Scale: 125% Resolution: 2560 x 1440

It looks like, that the line is 125% long.

[bytecod3r]

I have the same problem, any fix for it?

[Rawtt]

Bad, no one can fix this problem...

[govindashrit]

Yes fix required !! Any workaround

[pduy99]

2 years and no fix :|

[4A-75-6E-69-6F-72]

If you don't mind losing the animation of the line from the previous selected tab to the newly selected one, I got a work around for you!!! Hide the selected tab's line and add a border at the bottom. The CSS snippet below does just that. The CSS file containing this code should be added to the tabPane stylesheets.

//Hide default line of selected tab
.jfx-tab-pane:top .depth-container .tab-header-area .headers-region .tab-selected-line {
    -fx-background-color: transparent;
}

//Add border at the bottom of the selected tab
.jfx-tab-pane .tab:selected 
{
    -fx-border-width : 0 0 3 0;
//IInsert the color of the selected tab's line you wish to have
    -fx-border-color:  #d0d0d0;
}

[varunborar]

A simple work around for this is,

.jfx-tab-pane .tab-selected-line { -fx-background-color: -fx-light-accent-color; -fx-scale-x: 75%; }