Ticket #8844 (closed bug: fixed)

Opened 17 months ago

Last modified 12 months ago

Menu: Internet explorer 10 renders bullets in submenus

Reported by: Mamen Owned by:
Priority: minor Milestone: 1.10.3
Component: ui.menu Version: 1.9.1
Keywords: Cc:
Blocking: Blocked by:

Description

IE10 renders list-styles on the <li>s

This seems to be only on sub menus. Possible since they starts out as hidden.

Test here:  http://jqueryui.com/menu/ select "Delphi" or "Salzburg". Bullets appear.

Tested on IE10 (Windows 7)

Change History

comment:1 Changed 17 months ago by tj.vantoll

  • Status changed from new to open
  • Summary changed from Internet explorer 10 renders bullets in menu to Menu: Internet explorer 10 renders bullets in submenus

Confirmed. I see the problem in IE10 and not IE < 10. I'll try to minify this one a bit.

comment:2 Changed 17 months ago by Mamen

Setting the css after it is visible seems to fix the problem. (remove/add class?)

comment:3 Changed 17 months ago by tj.vantoll

Might be the same issue as #8677.

comment:4 Changed 17 months ago by tj.vantoll

Here's a reduced test case that shows the issue -  http://jsfiddle.net/tj_vantoll/v4MJX/.

@Mamen could you fork my jsFiddle and show how setting the CSS after the submenu is visible works around the problem?

comment:5 follow-up: ↓ 6 Changed 17 months ago by Mamen

This fixes the problem in IE10.  http://jsfiddle.net/mrmamen/T3Sgm/

I've also tested in IE10 for Windows 8 now.

comment:6 in reply to: ↑ 5 Changed 17 months ago by tj.vantoll

Replying to Mamen:

This fixes the problem in IE10.  http://jsfiddle.net/mrmamen/T3Sgm/

I've also tested in IE10 for Windows 8 now.

Thanks.

This is almost certainly the same issue as #8677 which was closed as wontfix. That being said #8677 was a pretty minor issue whereas with this one the default look has major visible issues.

comment:7 follow-up: ↓ 8 Changed 16 months ago by gdonkers

I've found the same problem with the menubar(). Got a better solution also for menu(). See mu jsFiddle based on yours:  http://jsfiddle.net/RT9Xz/

just adding css: li, li li, li li li {

list-style-type: none;

}

comment:8 in reply to: ↑ 7 ; follow-up: ↓ 9 Changed 15 months ago by tj.vantoll

Replying to gdonkers:

I've found the same problem with the menubar(). Got a better solution also for menu(). See mu jsFiddle based on yours:  http://jsfiddle.net/RT9Xz/

just adding css: li, li li, li li li {

list-style-type: none;

}

Good find. li, li { list-style-type: none; } indeed fixes the issue, but this isn't something we can apply globally. Whenever I try to incorporate .ui-menu or .ui-menu-item into the selector it doesn't work anymore, which is just bizarre -  http://jsfiddle.net/tj_vantoll/jaRbf/1/.

Can anyone come up with a CSS way of fixing this that limits the rules to <li>s in a .ui-menu?

comment:9 in reply to: ↑ 8 Changed 15 months ago by gdonkers

Replying to tj.vantoll:

Replying to gdonkers:

I've found the same problem with the menubar(). Got a better solution also for menu(). See mu jsFiddle based on yours:  http://jsfiddle.net/RT9Xz/

just adding css: li, li li, li li li {

list-style-type: none;

}

Good find. li, li { list-style-type: none; } indeed fixes the issue, but this isn't something we can apply globally. Whenever I try to incorporate .ui-menu or .ui-menu-item into the selector it doesn't work anymore, which is just bizarre -  http://jsfiddle.net/tj_vantoll/jaRbf/1/.

Can anyone come up with a CSS way of fixing this that limits the rules to <li>s in a .ui-menu?

Who that was strange. But I've found the solution: add the display: inline; to it.  http://jsfiddle.net/aeCxq/

edit: Crap, I didn't check it in an different browser, i.e. in Safari for Mac it doesn't work. Can we make it an only IE10 css or find an different solution?

Last edited 15 months ago by gdonkers (previous) (diff)

comment:10 Changed 15 months ago by tj.vantoll

  • Milestone changed from 1.10.0 to none

comment:11 follow-up: ↓ 12 Changed 14 months ago by gtraxx

Hi, Fix bug with :

li.ui-menu-item { 
  /* This fixes the IE10 issue */
  list-style-type: none;
}

comment:12 in reply to: ↑ 11 Changed 14 months ago by tj.vantoll

Replying to gtraxx:

Hi, Fix bug with :

li.ui-menu-item { 
  /* This fixes the IE10 issue */
  list-style-type: none;
}

I'm still seeing it  http://jsfiddle.net/tj_vantoll/jaRbf/3/.

comment:13 follow-up: ↓ 14 Changed 12 months ago by fetis

I think this can work as fix

.ui-menu-item {
  /* IE10 fix */
  list-style-image: url(data:0);
}

I can't say how badly to have fake image here. But I think it's better than to have real url like url(blank.gif)

comment:14 in reply to: ↑ 13 Changed 12 months ago by tj.vantoll

Replying to fetis:

I think this can work as fix

.ui-menu-item {
  /* IE10 fix */
  list-style-image: url(data:0);
}

I can't say how badly to have fake image here. But I think it's better than to have real url like url(blank.gif)

Very clever and it works! url(data:0) sends out an invalid request so you're right that we want a real image. We don't have a small / transparent image in the project (I suppose we could add one), but sending the smallest possible transparent data-uri'd image seems to work fine ( http://stackoverflow.com/questions/6018611/smallest-data-uri-image-possible-for-a-transparent-image).

Tested in IE6 - 10, Firefox, Chrome, Safari, and Opera and I didn't notice any adverse effects. Pull request:  https://github.com/jquery/jquery-ui/pull/962

comment:15 Changed 12 months ago by TJ VanToll

  • Status changed from open to closed
  • Resolution set to fixed

Menu: Add a transparent list-style-image to menu items. Fixed #8844 - Menu: IE 10 renders bullets in submenus

Changeset: 64a39d9b0d5710729653b185eae427853608744b

comment:16 Changed 12 months ago by TJ VanToll

Menu: Add a transparent list-style-image to menu items. Fixed #8844 - Menu: IE 10 renders bullets in submenus (cherry picked from commit 64a39d9b0d5710729653b185eae427853608744b)

Changeset: 329974b2c6313fdbdceec1820bf7e687c8ae47ef

comment:17 Changed 12 months ago by tj.vantoll

  • Milestone changed from none to 1.10.3
Note: See TracTickets for help on using tickets.