Bug Tracker

#10838 closed bug (invalid)

Opened November 20, 2011 01:18AM UTC

Closed December 05, 2011 08:04AM UTC

Opera .slideToggle() bug

Reported by: anonymous Owned by: anonymous
Priority: low Milestone: None
Component: effects Version: 1.7.1rc1
Keywords: Cc:
Blocked by: Blocking:
Description

Hello I've witnessed a slideToggle bug with Opera browser.

An absolute positioned "<section id="contacts">" element is adversely reseting its top positioning after slide-down of a "<ul>" child. Section's position visually refreshed from negative 'top:' value to 0 according to its parent-element and the result is disappearing of section's child element bellow the slided after sliding-down and bugy tracing leaving tracks when toggled back.

Here's part of the code

<body>
  	  <div class="wrap">
	  	  <h1>a Heading</h1>
		  <section id="main">
			  web content
		  </section>
		  <section id="contacts">
			  <ul>
				 <li>some text</li>
				 <li>some text</li>
				 <li>some text</li>
			  </ul>
			  <h3><a href="#">click event area</a></h3>
		  </section>	
  	  </div>
  </body>

body,section,nav,ul,li,a,h1,h2,h3,div,img,p,span{margin:0; padding:0; }
body { font: normal normal normal 74%/16px 'Arial','Verdana','sans-serif'; background:url('../images/bg.png') 62px 77px;}

section,nav{display:block;}

div.wrap{
  width:742px;
  margin:0 auto;
  position:relative;
}

section#main{
  height:500px;
  position:relative;
}

div.wrap h1:first-child {
  color:#fff;
  font-size:3.1em;
  margin:54px 0 44px;
  font-weight:normal;
  letter-spacing:1px;
  text-transform:uppercase;
}

section#contacts{
    top:-54px;
    right:0;
    position:absolute;
    width:174px;
    color:#fff;
    text-align:center;
    background-color:#E04460;
    padding: 0 12px;
    
    
    -ms-border-bottom-right-radius: 12px;
    -ms-border-bottom-left-radius: 12px;
    -webkit-border-bottom-right-radius: 12px;
    -webkit-border-bottom-left-radius: 12px;
    -moz-border-radius-bottomright: 12px;
    -moz-border-radius-bottomleft: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

section#contacts h3 a{
    color:#fff;
    font-size:1.4em;
    text-decoration:none;
    line-height:20px;
    display:block;
    padding:12px 0
    
}

section#contacts ul{
    display:none;
    border-bottom:1px solid #fff;
}

section#contacts ul li{
    margin: 7px 0;
    list-style-position:inside;
}

function contacts(){
   	$('section#contacts h3 a').click(
    	   function(){    		
		$('section#contacts ul').slideToggle();
    		return false;
    	  }	
	);
 }
Attachments (0)
Change History (2)

Changed November 20, 2011 10:38PM UTC by timmywil comment:1

component: unfiled → effects
owner: → anonymous
priority: undecided → low
status: new → pending

Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket.

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/FrKyN/ Open the link and click to "Fork" (in the top menu) to get started.

Changed December 05, 2011 08:04AM UTC by trac-o-bot comment:2

resolution: → invalid
status: pending → closed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!