Fixed XUL elements located on top of a webpage are hidden or partly hidden by webpage under it.




11 years ago
3 years ago


(Reporter: christina, Unassigned)




Firefox Tracking Flags

(Not tracked)



(1 attachment)

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv: Gecko/20080201 Firefox/
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9) Gecko/2008051202 Firefox/3.0

My add-on creates popup windows embedded in the browser on top of the users current webpage.  This was working fine on mac and pc as of firefox 2, but with firefox 3 they are not working right at all. Since firefox 3, these type of xul elements show up with no borders, sometimes partly hidden, sometimes with elements from the webpage underneath showing through.  Mousing over the xul popup will often force more of the webpage's elements up above the popup or hide the entire popup.  With firefox 2, this problem only happened when dealing with flash elements under the popup.

These are the same sort of popup window that are created by google notebooks or cooliris preview. 

How to create this type of popup with xul code:

<window id="main-window">
    <vbox id="statsmodal" class="statsmodal" hidden="true" pack="center">
            <iframe id="statsmodal-content" src="about:blank" context="contentAreaContextMenu"/>

#statsmodal-content {
    left: 0px;
    top: 0px;
    width: 600px;
    height: 450px;

    border: 2px solid #CCCCCC;

    -moz-border-radius: 3px 3px 3px 3px;
    width: 100px;
    height: 100px;

Reproducible: Always

Steps to Reproduce:
1. Download the Cooliris Preview extension on a mac with firefox 3.
2. Modify the install.rdf file of the extension so it will run with the newest version of firefox 3.
3. Run firefox 3.
4. Go to any webpage that contains a link.
5. Hover over the link and a small icon should appear to the right of the link.
6. Click on the icon.
7. A popup will appear but all of the xul elements except the iframe will be missing.

Another Method
1. Create a simple firefox extension with the xul code contained in details with a button that will show the popup.
2. Show the popup
Actual Results:  
Only the iframe in the popup will appear.  Mousing over things like text that is on the webpage below will cause it to jump up above the modal. Running your mouse over the whole modal a couple of times will make the iframe disappear as well.

Expected Results:  
The popup should show on top of the webpage, and not be hidden or partly hidden until it is modified to be hidden.  The types of elements under it (including flash) or if they are moused over, should not hide parts or all of the popup.

This is a major issue for my add-on, and it looks like it will be problems for several other add-ons that do similar things with xul.  It'd be cool if when this was fixed it also worked with flash elements under xul (which has been broken as long I have have been working with xul)!
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9pre) Gecko/2008052009 Minefield/3.0pre

It is completely broken on Windows. The blue icon doesn't even appear next to the link.
So I think there are two problems:
1. the toolbar disappeared 
2. the icon disappeared

I searched for the bug that caused your disappeared icon (at least on Windows) and you can find it in this regression range:
Caused by bug 292789 ?

But this bug was more about the missing toolbar. Regression range of the toolbar: 
and that seems to point to bug 317375.

Safiel, can you attach a testcase for the problem, for without the icon it is impossible to test.
Blocks: 317375
Component: General → Layout
Ever confirmed: true
Keywords: regression
OS: Mac OS X → All
Product: Firefox → Core
QA Contact: general → layout
Hardware: Macintosh → All
Version: unspecified → Trunk
My problem is not about a missing toolbar or missing icon.  I'm not having a problem on windows, but this could be because I do not do this in my extension when running on windows (there are other zindex issues + the inability to hide/show iframes without reloading their contents that makes life very difficult).  It is about making a xul element (like a vbox) that is relatively positioned on top of the webpage in the main browser window.

The Cooliris Preview extension was just one example (not my add-on) of someone using this method to make a popup that is part of the same window over the web content.  I've ran the cooliris preview add-on on the mac firefox 2 (works fine) and firefox 3 (does not) and windows firefox 2 (works fine).  The Cooliris Preview add-on does not create a toolbar, you'll see the icon it creates by hovering your mouse over a link and clicking on the icon will create the popup.

Another thing that you could try, with the cooliris preview add-on is to right click on a link and choose the "Cooliris - Send Link" option. This will also make a popup with a couple of text entry fields.  The same sorts of things happen here as well, the popup gets hidden over time or as other elements of the webpage under it get changed, load, or moused over.  Also, when you scroll, it wont repaint right, often leaving parts of the modal on the webpage below, even though the modal is positioned relative to the entire browser and not the web page.  In this case if the popup totally disappears, you can find it (or at least parts of it) again by mousing the text entry fields for the popup in it's current location.

Cooliris Preview:

I'll try to find some other add-ons that create popups in a similar mannor, but some other add-ons that appear to be doing the same sort of thing are actually modifying the html of the page the user is on instead of making a relative xul element over the page.  Or I might just make a simple add on that is making this type of xul element that is always present.

'position: relative' does nothing in XUL, nor did it do anything in Firefox 2.

If you are trying to place an element from the chrome over a web page, that does not work (this is bug 130078) and didn't work in Firefox 2.

If you are expecting the XUL code you gave above to act as a browser, it should be a <browser> element with type="content".
No longer blocks: 317375
This add-on is a very simple and crude way to see this bug in action.  I didn't package it up as an xpi, but it can be installed by unzipping it into your extensions directory and forcing an install by deleting compreg.dat and xpti.dat.

The extension will add a really ugly button to the bottom of your browser, clicking on it will hide/show a vbox over your browser with a xul image and iframe in it that is pointing to

The vbox should display fine on windows (firefox 2-3) and mac firefox 2, but firefox 3 mac will cause various display problems.

Note: swapping tabs will hide the vbox on windows.
I just realized I made a mistake,  I was looking at the children of the vbox (which I had set as relative) but the vbox itself set to fixed. I'm changing the title to reflect this.

Also, I don't know if the add-on I posted works in firefox 3 windows, I haven't been testing there because there are other xul limitations that make doing what I need to do in my extension impossible on windows.  But it works on firefox 2 mac and pc for sure and is messed up on firefox 3 mac.

I'm sure I've seen this working just fine in firefox 2. Google notebook does this, Cooliris does this, my extension does as well.  The only thing that didn't seem to work on firefox 2 mac was when there was a flash element on the webpage under the xul element, the flash element would bleed through whenever the flash element painted.  There might have been problems doing this on with firefox 2, but it seemed like it generally worked quite well, and things on firefox 3 mac are now totally unusable.

I'm not having any specific problems with iframe or browser elements, but all xul elements I've tried (vbox, images, iframes) seem to not be displaying right on firefox 3 mac.  In fact, I think that other elements (like the border for the vbox) are not showing up at all.

Summary: Relative XUL elements located on top of a webpage are hidden or partly hidden by webpage under it. → Fixed XUL elements located on top of a webpage are hidden or partly hidden by webpage under it.
Does anyone know if this bug is going to get fixed?  I need to know, because if it isn't I need to figure out a whole new system then what I used to use to show these popups, if my extension is going to work right on firefox 3. thanks.
Will not be fixed.

Work around it using workarounds mentioned in bug 130078.
You need to log in before you can comment on or make changes to this bug.