Chrome Jquery Fade In Issue

JavaScript
1

Hi All,

Has anyone else noticed how scrollbars within a page turn black when doing a jquery fadein in chrome? Or does anyone have a solution. Here’s an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript"> 
 
$(document).ready(function(){
  $("#container").hide(0).fadeIn(1500);
});
</script> 

</head>
<body>



<div id="container" style="width:800px; margin: 0 auto;">

	<div id="scroller" style="height: 200px; overflow:scroll;background-color:#ffffff;">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel scelerisque magna. Pellentesque eu nibh vel sem gravida tempor. Curabitur posuere diam sed ligula dictum eget porttitor lectus fermentum. Quisque quis neque nunc, eget semper magna. Proin posuere condimentum dignissim. Integer pharetra rhoncus magna ac mollis. Pellentesque faucibus venenatis sodales. Phasellus consectetur quam ut est consequat non tempor lectus lacinia. Vestibulum eros dolor, sollicitudin a laoreet a, feugiat eu mi. Maecenas at egestas erat. Etiam feugiat porta risus, sed pretium lorem lacinia viverra. Etiam turpis libero, ultrices ut suscipit non, vestibulum a orci. Nulla volutpat pellentesque nulla pharetra vehicula. Donec eget massa at diam sagittis luctus. Nullam turpis arcu, volutpat viverra fringilla et,  sollicitudin sit amet tortor. Aliquam ut malesuada lorem. Fusce nulla mauris, porttitor ornare vestibulum et, tempus ut diam. Aliquam sodales iaculis dapibus. Donec blandit facilisis augue non pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel scelerisque magna. Pellentesque eu nibh vel sem gravida tempor. Curabitur posuere diam sed ligula dictum eget porttitor lectus fermentum. Quisque quis neque nunc, eget semper magna. Proin posuere condimentum dignissim. Integer pharetra rhoncus magna ac mollis. Pellentesque faucibus venenatis sodales. Phasellus consectetur quam ut est consequat non tempor lectus lacinia.</p>
	</div>

</div>


</body>
</html>

Many thanks,
cph :slight_smile:

2

Try setting the css overflow-y to hidden for the fadein, then back to auto afterwards.

3

Thanks for the suggestion, pmw.

I tried this

<script type="text/javascript"> 
 
$(document).ready(function(){
  $("#scroller").css("overflowY", "hidden");
  $("#container").hide(0).fadeIn(1500);
  $("#scroller").css("overflowY", "auto");
});
</script>

which doesn’t seem to work (but maybe I’m doing something wrong).

4

The auto part is currently occurring immediately. As you need it to occur after the fade in, you will need to place it in the fadeIn’s callback function.