Loading ...
Sorry, an error occurred while loading the content.

MenuBar rendering in Safari conflict with container.css

Expand Messages
  • yazdog8
    I m not sure if anyone has run into this problem. I m rewriting the company menu/nav structure and ran into an interesting problem in regards to the Safari
    Message 1 of 2 , Jun 1, 2007
    • 0 Attachment
      I'm not sure if anyone has run into this problem. I'm rewriting the
      company menu/nav structure and ran into an interesting problem in
      regards to the Safari browser. We're using YUI Panel to attach
      modality messaging to this structure along with the MenuBar and some
      motion assets.

      For some reason, when I added the panel and it's assets, the MenuBar
      stopped rendering correctly within Safari. To test this, I pulled out
      one of your examples from the site that actually worked
      (http://developer.yahoo.com/yui/examples/menu/topnavfrommarkup.html)
      in Safari and pulled the file down locally. The menu worked correctly.
      Then I added in container/assets/container.css to the mix for the
      panels and that's where the problems with the YUI menu started. It
      flickered and disappeared behind the content. On mouseover, it would
      render correctly. Very confusing.

      In the Safari Debug panel I used the DOM tree to show the rendered
      body content. I noticed that the menu had inline styles dynamically
      added to it - style="position: static; display: block; z-index: 0; ".
      For some reason, the position of static wasn't being recognized. Upon
      further review of the container.css file, I found this:

      .yui-overlay {
      position:absolute;
      display:block;
      }

      It seemed that Safari was ignoring the inline style in favor of the
      yui-overlay class. Attaching a position:static !important to the ID on
      the menu container actually caused the menu to render and fire
      correctly in Safari.

      Has anyone run into this problem before?

      Easy way to test this is to use the link from the Website Top Nav With
      Submenus Built From Markup and just add container.css.

      Using XHTML 1.0 transitional and Safari Version 2.0.4 (419.3)
    • Todd Kloots
      yazdog8 - Sorry for my late reply on this issue. You ve got a valid bug here. I created a test case according to your repro instructions:
      Message 2 of 2 , Sep 18, 2007
      • 0 Attachment
        "yazdog8" -

        Sorry for my late reply on this issue. You've got a valid bug here. I
        created a test case according to your repro instructions:

        http://yuiblog.com/sandbox/yui/v230/examples/menu/safari_bug_demo.html

        I dug into this and it seems like the issue is that when the MenuBar's
        JavaScript switches the element's position from "absolute" to "static"
        Safari doesn't redraw that element correctly. If you resize the browser
        window after the page is loaded you'll see that the MenuBar snaps into
        place.

        I'll definitely address this issue in the next build of Menu. For now,
        I found adding a style definition to the page that defines the MenuBar's
        "position" property as "static" fixes the issue:

        http://yuiblog.com/sandbox/yui/v230/examples/menu/safari_bug_fix.html

        - Todd

        yazdog8 wrote:
        >
        > I'm not sure if anyone has run into this problem. I'm rewriting the
        > company menu/nav structure and ran into an interesting problem in
        > regards to the Safari browser. We're using YUI Panel to attach
        > modality messaging to this structure along with the MenuBar and some
        > motion assets.
        >
        > For some reason, when I added the panel and it's assets, the MenuBar
        > stopped rendering correctly within Safari. To test this, I pulled out
        > one of your examples from the site that actually worked
        > (http://developer.yahoo.com/yui/examples/menu/topnavfrommarkup.html
        > <http://developer.yahoo.com/yui/examples/menu/topnavfrommarkup.html>)
        > in Safari and pulled the file down locally. The menu worked correctly.
        > Then I added in container/assets/container.css to the mix for the
        > panels and that's where the problems with the YUI menu started. It
        > flickered and disappeared behind the content. On mouseover, it would
        > render correctly. Very confusing.
        >
        > In the Safari Debug panel I used the DOM tree to show the rendered
        > body content. I noticed that the menu had inline styles dynamically
        > added to it - style="position: static; display: block; z-index: 0; ".
        > For some reason, the position of static wasn't being recognized. Upon
        > further review of the container.css file, I found this:
        >
        > .yui-overlay {
        > position:absolute;
        > display:block;
        > }
        >
        > It seemed that Safari was ignoring the inline style in favor of the
        > yui-overlay class. Attaching a position:static !important to the ID on
        > the menu container actually caused the menu to render and fire
        > correctly in Safari.
        >
        > Has anyone run into this problem before?
        >
        > Easy way to test this is to use the link from the Website Top Nav With
        > Submenus Built From Markup and just add container.css.
        >
        > Using XHTML 1.0 transitional and Safari Version 2.0.4 (419.3)
        >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.