Ticket #8844 (closed bug: fixed)

Opened 21 months ago

Last modified 8 weeks 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 20 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 20 months ago by Mamen

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

comment:3 Changed 20 months ago by tj.vantoll

Might be the same issue as #8677.

comment:4 Changed 20 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 20 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 20 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 19 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 19 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 19 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 19 months ago by gdonkers (previous) (diff)

comment:10 Changed 18 months ago by tj.vantoll

  • Milestone changed from 1.10.0 to none

comment:11 follow-up: ↓ 12 Changed 18 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 17 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 16 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 16 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 15 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 15 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 15 months ago by tj.vantoll

  • Milestone changed from none to 1.10.3

comment:18 follow-up: ↓ 19 Changed 8 weeks ago by philw

This appears to cause problems on IE7 for SSL systems, giving a chap the old "this page contains a mix of secure and insecure items" problem we all used to know and love.

Yes, yes, I know only insane people and major governments use IE7, but it's supported, and those people (the insane ones I suppose) pay my wages. The issue is related to an IE7 defect, logged somewhere or other, where you apply an image using JS which is fully HTTPS served, but IE7 doesn't realise that, and barfs with the message. Government users cannot turn that message off, so that's no work-around.

My dirty hack to get my customers going again is to put an IE7 conditional comment in there which gets rid of the problem, comme ca:

.ui-menu .ui-meni-item {list-style-image:none}

Thanks to a bunch of government security, the powerful debugging tools of IE7 and the diminutive size of the system I'm fixing, that one line is worth a few quid, so I'll put it here as it may help the next person. I found it the hard way, but full points for marking the diff with this ticket number so I could come right here to make it messy.

I say "appears", because you made the change ages ago, and I only just hit the problem, so I'm a bit suspicious. Still, this fixes it. I just want to note what I found here, not to re-open this or anything.

Last edited 8 weeks ago by philw (previous) (diff)

comment:19 in reply to: ↑ 18 Changed 8 weeks ago by tj.vantoll

Replying to philw:

This appears to cause problems on IE7 for SSL systems, giving a chap the old "this page contains a mix of secure and insecure items" problem we all used to know and love.

Yes, yes, I know only insane people and major governments use IE7, but it's supported, and those people (the insane ones I suppose) pay my wages. The issue is related to an IE7 defect, logged somewhere or other, where you apply an image using JS which is fully HTTPS served, but IE7 doesn't realise that, and barfs with the message. Government users cannot turn that message off, so that's no work-around.

My dirty hack to get my customers going again is to put an IE7 conditional comment in there which gets rid of the problem, comme ca:

.ui-menu .ui-meni-item {list-style-image:none}

Thanks to a bunch of government security, the powerful debugging tools of IE7 and the diminutive size of the system I'm fixing, that one line is worth a few quid, so I'll put it here as it may help the next person. I found it the hard way, but full points for marking the diff with this ticket number so I could come right here to make it messy.

I say "appears", because you made the change ages ago, and I only just hit the problem, so I'm a bit suspicious. Still, this fixes it. I just want to note what I found here, not to re-open this or anything.

Interesting, I just confirmed this at  https://jqueryui.com/resources/demos/menu/default.html, and verified the behavior does not occur in IE8.

Technically, we could add a .ui-menu .ui-menu-item { *list-style-image: none; } rule, but since we no longer support IE7 I think we'll avoid doing that. Thanks for posting this here as it'll help others that need to support IE7 work through this.

Note: See TracTickets for help on using tickets.