Bug Tracker

Modify

Ticket #4737 (closed bug: fixed)

Opened 5 years ago

Last modified 2 years ago

repeated toggle() goes out of sync (IE8)

Reported by: nbr Owned by:
Priority: minor Milestone: 1.4
Component: effects Version: 1.3.2
Keywords: Cc:
Blocking: Blocked by:

Description

I tried using $(...).toggle() for two elements of which one was hidden and one visible.

Expected results: the visible one goes hidden and vice versa. The next click returns the elements as they originally were.

Actual results on IE8: the first toggling was ok, but the second click hides both elements.

See attached test case, or here:  http://www.iki.fi/naapuri/testit/toggle.html

Attachments

toggle.html Download (571 bytes) - added by nbr 5 years ago.
IE8displaynone.html Download (388 bytes) - added by brianmoschel 4 years ago.
Showing IE8's display none bug

Change History

Changed 5 years ago by nbr

comment:1 Changed 5 years ago by dmethvin

  • Component changed from unfilled to fx

Changed 4 years ago by brianmoschel

Showing IE8's display none bug

comment:2 Changed 4 years ago by brianmoschel

This issue is a bug in IE8 where display:none under certain circumstances will not allow the element's height and width to be 0px. Since ":hidden" checks 0 height and width, toggle() keeps trying to hide the element instead of show()-ing it.

The attached HTML file shows a simple test case with 3 span elements. The middle span element is set to display:none, but in IE8 the height is 19px and width is 4px. Earlier IE's and other browsers all show the height and width of this element at 0px.

Setting height and width to 0 manually doesn't help, and I haven't found any info on this bug on the web. So the possible solutions are a) find a method to force height/width of elements to 0 in IE8 (not sure how) or b) change ":hidden" to check display:none instead of 0'ed height and width.

comment:3 Changed 4 years ago by brianmoschel

This seems to happen with inline elements that have inline elements before and after them. The problem goes away when you remove the first span.

comment:4 Changed 4 years ago by brianmoschel

Actually, this is the same issue as experienced in #4512, which was solved using:

force = /tr$/i.test( elem.nodeName ); ticket #4512

This ticket can be resolved by adding span to that regex:

force = /tr|span$/i.test( elem.nodeName ); ticket #4512

However, someone has recently reopened #4512, saying they see the same issue with ul elements, and I've even seen it with divs that have display:inline, so I don't think this is a good solution. Might this be something that uses feature detection testing?

comment:5 Changed 4 years ago by jquery@…

I just found this issue (the hard way) on jQuery 1.4.2 and IE8. Using the toggle.html attached file and changing to jQuery 1.4.2, same thing happens; this is a bummer for the latest version of jQuery and IE!

A simple workaround is to use a <div style='display: inline'> instead of a <span> tag.

comment:6 Changed 4 years ago by snover

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

This should be fixed now with the fix for #4512.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.