206343 - JavaScript submenus popup correctly, but cannot be seen

Status: RESOLVED WORKSFORME

(Core :: Web Painting, defect, P5)

Description

[Phil Schwartau]

Using Mozilla/5.0 (Windows; U; WinNT4.0; en-US; rv:1.4b) Gecko/20030515
Using Mozilla/5.0 (X11;  U;  Linux i686; en-US; rv:1.4b) Gecko/20030505

The dynamic submenus at the top of the given URL are invisible:
https://www.t-mobile.com/mytmobile/login/default.asp?

STEPS TO REPRODUCE
1. Bring up the site side-by-side in IE6 and in Mozilla
2. Mouseover the "Products" menu item in IE
3. A dynamic submenu appears: 'Overview', 'Phones', etc.
4. Note the URLs appearing in the status bar as you mouseover each submenu item
5. Mouseover the same "Products" menu item in Mozilla
6. BUG: no submenu is visible
7. Yet it is present: move the mouse below "Products" slowly, as we did in IE
8. Notice the cursor alternately changing from an 'arrow' to a 'hand'
9. Notice the same URLs appearing in the status bar as they did in IE

This shows that in Mozilla, the dynamic submenus do pop up on mouseover, 
and are in the correct layout position, but for some reason are invisible.

You can even do the same thing in the Mozilla DOM Inspector, and select
a submenu item for viewing. However, I don't know enough about CSS computed
style to see if there is any obvious explanation there.

I have several old Mozilla builds on my machine. One build where I CAN
see the submenus is:

WORKS:        Mozilla/5.0 (Windows; U; WinNT4.0; en-US; rv:1.3a) Gecko/20021115  
DOESN'T WORK: Mozilla/5.0 (Windows; U; WinNT4.0; en-US; rv:1.3b) Gecko/20021219

These builds are pretty old; I don't know if other users can pin down the
timeframe better than this -

Comment 1

[Phil Schwartau]

Madhur discovered this:

------- Additional Comments From [e-mail]  2003-05-19 12:07 -------
A piece of code in the style sheet ..... 
https://www.t-mobile.com/masthead/css/masthead.css

says ....
/* HIDE Masthead Menus from Netscape */
.masthead-navElement {
        position:absolute;
        visibility:hidden;
}
/* end HIDE Masthead Menus from Netscape */


Could there be some browser sniffing going on?
I am reading through the JS code to figure out if this could be true. 
------------------------------------------------------------------------------


Yet I wonder why I CAN see the submenus in my 1.3a Mozilla build above?

Comment 2

[Andrew Schultz]

no submenu with linux trunk 20030519.  also no cursor changing to hand or URLs
in statusbar.  same behavior (doesn't work at all) with linux trunk 20021114 and
20021116.

Comment 3

[Madhur Bhatia]

I do see the described behaviour in comment 0 on winXP.
Good catch, Phil :-)

 

Comment 4

[Phil Schwartau]

Andrew is right about Linux: the situation is even worse. Not
even the "ghost" submenus appear there, as they do on Windows.
Nothing whatsoever pops up -

Comment 5

[Brendan Eich [:brendan]]

Anyone know when things regressed, exactly?

/be

Comment 6

[Phil Schwartau]

Attachment: Reduced testcase #1

Comment 7

[Phil Schwartau]

The testcase could be reduced even further; I'll do that if I have time.
Meanwhile, we can already see that deleting this line makes everything
work in current Mozilla builds:

<style type="text/css"><!-- @import url(/masthead/css/menus.css); --></style>

It refers to the CSS file https://www.t-mobile.com/masthead/css/menus.css


In the above testcase, the parent <div> is this:

<table width="10%">
<tbody>
  <tr class="masthead-nav">
    <td id="topNavElementParent0">
      <a href="http://www.t-mobile.com/products/" class="plain">Products</a>
    </td>
  </tr>	
</tbody>
</table>


And the submenu is:


<table border="0" cellpadding="0" cellspacing="0">
<tbody>
  <tr>
    <td class="menuBox"> 				
    <p><span class="spcr">&nbsp;</span>
      <a href="http://www.t-mobile.com/products/">
      <img src="/images/arrow.gif" width="12" height="11" alt="&gt;" border="0">
      Overview
      </a>
    </p>

             etc.
             etc.

Comment 8

[Phil Schwartau]

Attachment: Reduced testcase #2

Comment 9

[Phil Schwartau]

The 2nd reduced testcase consists of this:

<div id="topNavElement0" class="masthead-navElement">
<table>
<tbody>
 <tr>
   <td class="menuBox"> 				
    <span class="spcr">&nbsp;</span> Overview
   </td>

   <td class="menuBuffer" rowspan="2" width="15">&nbsp;
   </td>
 </tr>
</tbody>
</table>
</div>


If you load it in IE6, you see a single cell, "Overview", at the left.
In my Mozilla build from 2002-11-15, I can see this as well.

But in all later Mozilla builds that I have, through today's build,
nothing appears, and the content appears completely blank.

I have found that deleting the second <td> fixes the problem!!!

      <td class="menuBuffer" rowspan="2" width="15">&nbsp;
      </td>

As noted above, deleting this reference also fixes the problem:

<style type="text/css"><!-- @import url(/masthead/css/menus.css); --></style>

Comment 10

[Phil Schwartau]

Looking at this further, it seems to boil down to this attribute
on the second <td> element:

                       rowspan="2"

Of course, I didn't even have two table rows in testcase #2, but
I did in testcase #1. And in both testcases, removing this attribute
solves the problem in current Mozilla builds -

Comment 11

[Bernd]

This probably regressed by Davids patch to remove the NS_BLOCK_WRAP_SIZE as part
of the fix for bug 172896. Before this patch the block overflow area was used by
table cells to increase there size to hold the block and overflowing parts.
There are big questions that this is correct, for David there are no questions
that this is wrong, but on the other hand this is what IE currently also does.
The most obvious failure was that table cells always tried to cover also there
relative positioned content as the area is reported in the overflow area and
that was definetely wrong. As table cells did not know before overflow, there
was no overflow area handling inside table code. Bug 173277 should change that.
Looking back probably it would have been more correct to fix first the overflow
area and then remove NS_BLOCK_WRAP_SIZE, but thats how live goes.

If the patch for bug 173277 will not get backed out due to performance
regressions (which is possible as infrastucture is added) this bug and its
siblings should be fixed pretty soon.

Comment 12

[Mats Palmgren (inactive)]

The testcases #1 and #2 works now that bug 173277 has been fixed, but the
submenu still don't pop up at the URL.  Also, rendering any page from
https://www.t-mobile.com is slow.

Comment 13

[Juan]

Attachment: with this style sheet the test2 page and the original file works correctly

changing
@media screen {
  .masthead-navElement {
    -moz-opacity:.95;
  }
}
to
@media screen {
  .masthead-navElement {
    -moz-opacity:1;
  }
}
appears to solve the problem

Comment 14

[Juan]

Comment on attachment 133261 [details] [diff] [review]
with this style sheet the test2 page and the original file works correctly

using 
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4.1) Gecko/20031008

Comment 15

[Kevin Berkheiser]

In Windows XP, this seems to be resolved.  I can open and close the menus in
Testcase 1 and the menus at the URL above work fine.

In Suse 8.2, testcase 1 works fine.  However, when I open the URL above, I don't
see any menus.


Basic Data
Windows XP SP1
navigator.appName Netscape
navigator.userAgent Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6b)
Gecko/20031216 Firebird/0.7+
navigator.appVersion 5.0 (Windows; en-US)

and 

Basic Data
SUSE 8.2
navigator.appName Netscape
navigator.userAgent Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.6b)
Gecko/20031216 Firebird/0.7+
navigator.appVersion 5.0 (X11; en-US)

Comment 16

[Bernd]

Mats do you still see the problem at the url? wfm winxp 2004090105

Comment 17

[Mats Palmgren (inactive)]

The testcases works fine.

At http://support.t-mobile.com/productSelector.html I still don't see the
dropdown menu when hovering "Products" for example. I have spawned that off as
TE bug 258042.

-> WORKSFORME