Fieldset title blank in Chrome 87

[fabriciomurta]

Found: 5.3.0 Ext.NET Forums' thread: FieldSet-Title in Chrome 87

With Chrome 87 launch, the Fieldset title no longer works as expected. I is simply hidden, leaving a blank space where it should have been displayed.

In Sencha Talk it was suggested that this could address the issue:

.x-fieldset-header > .x-fieldset-header-text {
    position: unset
}

This won't though, address the issue when the fieldset has the collapsible setting enabled. The title itself is displayed with the fix above, but the collapse/expand handle won't be shown.

The following stackoverflow discussion offered another solution that would work with collapsible fieldsets, but the title was hid once the field is collapsed: Problem Fieldset label not visible with Sencha ExtJs 7.x on chrome 87.0.4280.67

So the problem remains until deeper investigation can take place. There have been reports even Ext JS 6 (Ext.NET 4) was subject to this issue. In fact the issue is reproducible in Ext.NET 3 (Ext JS 5.x, example), but works normally with Ext.NET 2 (Ext JS 4.x, example).

[ozguruysal]

Looks like the following override fixes the problem.

.x-fieldset {
    overflow: unset;
}

overflow: hidden is set in theme-base, so it probably effects all themes.

[fabriciomurta]

Thanks, @ozguruysal! I tried so many combinations and selectors that I missed the simple ones. I confirm it works with that override.

[fabriciomurta]

Just tested with latest chromium build and the issue is still reproducible there.

It already reads as fixed so chrome 88 will probably come without the issue. We should wait before making the fix in Ext.NET.

Some likely chromium issues logged in which Chrome 87 introduced problems, that can potentially fix this:

• Issue 1150316: Unwanted scrollbar if the fieldset is empty
• Issue 1152534: Absolutely positioned element with right >= 100% causes incorrect content box size of scrollable parent element
• Issue 1152461: After updating to the latest chrome version (87.0.4280.66 (Official Build) (64-bit)) an element with margin bottom no longer gets that margin when it is inside a parent with 100% height.

The following issue seemed, by the date and how it affects the new version, to be the one that introduced this problem, but although this might be included in latest Chromium build, I tested it and the issue is still there.

• Absolute positioning doesn't take full height

[ozguruysal]

Sencha support's answer mentioned in the Stackoverflow thread you linked above seems like a good fix. See here.