[patch][test] dijit BackgroundIframe does not cover scrolled menu popup

[Ronald Pijnacker]

When opening a popup containing a popup menu with a scroll-bar, part of the background can seep through. Also, when the content is scrolled, the background seeps through the part that was not visible before. See attached screenshots.

The cause of this problem is that the BackgroundIframe? that is attached to the popup wrapper does not cover the entire content of the wrapped node, nor does it cover the scrollbar.

Adding a second wrapper to handle the scrolling leaves the attached BackgroundIframe? inplace and makes sure it also covers the scrollbar. Please look at attached diff for the solution.

[Ronald Pijnacker]

Screenshot of wrong situation

[Ronald Pijnacker]

Screenshot of corrected situation

[Ronald Pijnacker]

diff of fix

[bill]

OK, please attach a minimal test case to reproduce this. Thanks!

[Ronald Pijnacker]

Minimal reproduction

[Ronald Pijnacker]

Attachment (popup_bug.html) added by ticket reporter.

[Ronald Pijnacker]

Added minimal test case. Please note this only works in IE (because of the use of an activeX object).

[dylan]

Candidate for 1.11 or 1.12?

[dylan]

Ok, after massive triage, ended up with about 80 tickets for 1.11 and 400 or so for 1.12. That's a bit unrealistic, so first I changed all 1.12 to 1.13 (with the plan to move some forward to the new 1.12. Now, I'm moving some of the 1.11 tickets that are less likely to get done this month without help to 1.11. Feel free to help out in January if you want to see this ticket land in 1.11.

[dylan]

Ticket planning... move current 1.12 tickets out to 1.13 that likely won't get fixed in 1.12.

[Michael Schall]

Here is a patch that will keep the border of the menu as well as the scrollbars.

[Michael Schall]

Patch to keep border and scrollbars showing when menu is over pdf in IE

[Michael Schall]

Updated patch with additional fix for resized menus

popup.js

@@ -145 +145 @@
                                         role: "region",
                                         "aria-label": widget["aria-label"] || widget.label || widget.name || widget.id
                                 }, widget.ownerDocumentBody);
-                                wrapper.appendChild(node);
+                                wrapper.borderWrapper = domConstruct.create("div", null, wrapper);
+                                wrapper.scrollerWrapper = domConstruct.create("div", null, wrapper.borderWrapper);
+                                wrapper.scrollerWrapper.appendChild(node);
 
                                 var s = node.style;
                                 s.display = "";
@@ -215 +217 @@
 
                         domStyle.set(wrapper, {
                                 display: "none",
+                        });
+                        domStyle.set(wrapper.borderWrapper, {
+                                border: ""                              // Open() may have moved border from popup to wrapper.
+                        });
+                        domStyle.set(wrapper.scrollerWrapper, {
                                 height: "auto",                 // Open() may have limited the height to fit in the viewport,
                                 overflowY: "visible",   // and set overflowY to "auto".
-                                border: ""                              // Open() may have moved border from popup to wrapper.
                         });
 
                         // Open() may have moved border from popup to wrapper.  Move it back.
@@ -292 +298 @@
                                 // and domStyle.get(node, "borderColor") etc. doesn't work on FF, so need to use fully qualified names.
                                 var cs = domStyle.getComputedStyle(node),
                                         borderStyle = cs.borderLeftWidth + " " + cs.borderLeftStyle + " " + cs.borderLeftColor;
-                                domStyle.set(wrapper, {
+                                domStyle.set(wrapper.borderWrapper, {
+                                        border: borderStyle     // so scrollbar is inside border and border are inside the backgroundIframe
+                                });
+                                domStyle.set(wrapper.scrollerWrapper, {
                                         overflowY: "scroll",
-                                        height: maxHeight + "px",
-                                        border: borderStyle     // so scrollbar is inside border
+                                        height: maxHeight + "px"
                                 });
                                 node._originalStyle = node.style.cssText;
                                 node.style.border = "none";

[dylan]

schallm, any chance you could raise this as a pull request in GitHub?? If you've not done much in the way of pull requests, we have some guidelines at ​https://github.com/dojo/dojo/blob/master/CONTRIBUTING.md , or feel free to ask me for help.