Opened 3 years ago

Closed 3 years ago

#18799 closed defect (fixed)

[regression] StackContainer: visibility:visible elements from unselected panes are visible

Reported by: gerhard presser Owned by: bill
Priority: undecided Milestone: 1.11
Component: Dijit Version: 1.11.0-rc1
Keywords: Cc:
Blocked By: Blocking:

Description

I'm using the dojox/layout/GridContainer with Portlets.
the GridContainer? is nested into a dijit/layout/StackContainer.

if one switches from one visible tab to another, the CSS-classes dijitVisible/dijitInvisible are set on the nested containers.
since 1.11.0-rc1, these selectors use the visibility property instead of the display property.

this causes the portlets to remain visible, because they have their visibility set to 'visible'.

I'm not that familiar with the visibility property, but it seems there can be visible children, even if the parent is hidden.

environment: chrome 48.0.2564.116 m, dojo 1.11.0-rc1

Attachments (2)

visibility_issue.html (1.5 KB) - added by gerhard presser 3 years ago.
visibility_issue.2.html (1.5 KB) - added by gerhard presser 3 years ago.
test-file

Download all attachments as: .zip

Change History (10)

comment:1 Changed 3 years ago by bill

Status: newpending

I can't reproduce any of the behavior you describe. Inspecting dijit/tests/layout/StackContainer.html shows StackContainer? setting dijitHidden rather than dijitInvisible, and dijitHidden is defined as display:none. Furthermore, I don't see dijitInvisible defined or used anywhere inside of dijit.

If you have a test case (an HTML file) that reproduces this problem please attach it.

comment:2 Changed 3 years ago by gerhard presser

Status: pendingnew

sorry, of course it's dijitHidden

but this selector is defined to be:

.dijitHidden {
	/* To hide unselected panes in StackContainer etc. */
	position: absolute; /* remove from normal document flow to simulate display: none */
	visibility: hidden; /* hide element from view, but don't break scrolling, see #18612 */
}

in dijit/themes/dijit.css
we are using the claro theme.

comment:3 Changed 3 years ago by bill

Status: newpending
Summary: .dijitInvisible uses visibility:hidden instead of display:none.dijitHidden uses visibility:hidden instead of display:none

Ah right, turns out I was looking at an old version of dijit. The change is from 534157f1ce7473697bd3587d7b39248f50d0ac9e, fixing #18612.

I still don't understand why visibility:hidden isn't working for you. You seem to be implying that the hidden panes have visiblity: visible, but of course, they actually have visibility: hidden.

Again, if you have a test case, please attach.

Changed 3 years ago by gerhard presser

Attachment: visibility_issue.html added

comment:4 Changed 3 years ago by gerhard presser

Status: pendingnew

ok - it's a tricky one. the problem only happens, if you add panes to the stackcontainer dynamically and if the existing pane(s) has content set to 'visibility:visible'

see the attached file (I messed up with the upload - there are duplicate files now - sorry for that)

Last edited 3 years ago by gerhard presser (previous) (diff)

Changed 3 years ago by gerhard presser

Attachment: visibility_issue.2.html added

test-file

comment:5 Changed 3 years ago by bill

Component: themesDijit
Milestone: tbd1.11
Owner: changed from dylan to bill
Status: newassigned
Summary: .dijitHidden uses visibility:hidden instead of display:noneStackContainer: content from hidden tabs sometimes overlays visible tab

Wow, OK I didn't realiize that a node with visibility:visible would show up even though its ancestor has visibility:hidden. But actually I do reproduce that with a simple test case:

<!DOCTYPE html>
<div style="visibility: hidden">
    this is hidden
    <div style="visibility: visible">
        this is still visible
    </div>
</div>

I guess the fix is to modify the definition of dijitHidden to not allow descendants to appear, regardless of their visibility setting, i.e.:

.dijitHidden, .dijitHidden * {
        visibility: hidden !important;
}

Not sure if the !important is needed in general, although it is needed for your actual test case, to override the inline style="visibility: visible" setting.

BTW, I don't understand why it only happens if you add panes to the StackContainer? dynamically, even though my simple test case above shows the problem with static markup.

Last edited 3 years ago by bill (previous) (diff)

comment:6 Changed 3 years ago by bill

Summary: StackContainer: content from hidden tabs sometimes overlays visible tab[regression] StackContainer: visibility:visible elements from unselected panes are visible

PS: I realize you mentioned all this in the initial description, it just took me a while to understand.

comment:7 Changed 3 years ago by gerhard presser

yes, the new selector seems to fix my issues

comment:8 Changed 3 years ago by wkeese <bill@…>

Resolution: fixed
Status: assignedclosed

In 520250b/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 
Note: See TracTickets for help on using tickets.