Bug Tracker

#8946 closed bug (invalid)

Opened April 22, 2011 01:47PM UTC

Closed April 22, 2011 02:51PM UTC

Last modified April 22, 2011 03:50PM UTC

FadeIn is not working while fading in "details" element with HTML content

Reported by: zygimantas@berziunas.com Owned by:
Priority: low Milestone: 1.next
Component: effects Version: 1.5.2
Keywords: Cc:
Blocked by: Blocking:
Description

Demonstration is here: http://jsbin.com/okosa3/2

Attachments (0)
Change History (6)

Changed April 22, 2011 02:41PM UTC by anonymous comment:1

Even more simplified example: http://jsbin.com/okosa3/4

Changed April 22, 2011 02:45PM UTC by zygimantas@berziunas.com comment:2

Details in inline element in HTML5. Maybe it is expected result. Please delete the ticket in this case.

Changed April 22, 2011 02:51PM UTC by timmywil comment:3

component: unfiled → effects
priority: undecided → low
resolution: → invalid
status: new → closed

The spec for the details tag has changed fairly recently and will soon be implemented as a dropdown widget in all browsers supporting HTML5.

Changed April 22, 2011 03:37PM UTC by rwaldron comment:4

I'm getting the correct, expected behaviour - which browser are you having issues in (just for record)?

Changed April 22, 2011 03:43PM UTC by zygimantas@berziunas.com comment:5

Replying to [comment:4 rwaldron]:

I'm getting the correct, expected behaviour - which browser are you having issues in (just for record)?

I have been seeing this behavior in Safari 5.0.5 and Firefox 4. I have found, that these browsers understand "details" element as inline (according to specs, it should be display:block). After adding details{display:block} to CSS, the problem is solved.

As I understand, it is not jQuery problems, it is browsers' fault they think new HTML5 elements are inline.

Changed April 22, 2011 03:50PM UTC by ajpiano comment:6

Yeah, a big part of Using HTML5 Now is to make sure to set new elements to be block in your css reset or whatnot.

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}