Member Avatar for xylude

I have been trying to get a loaded element to fade in on Safari for about 2 hours now to no avail. Anyone aware of a fix for this? Here is my code:

$('#badgeHolder').fadeTo('slow',0);
		
$('#badgeHolder').load('somePage',function(){
	$('#badgeHolder').fadeTo('slow',1);
});

I have also tried:

$('#badgeHolder').load('somePage').hide().fadeIn('slow');

Either one of the above works in every browser but safari. Please help! Thanks in advance.

  • 1 Contributor
  • 1 Reply
  • 499 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by xylude

Dani AI

Generated

Good that followed up — an unrelated script error is exactly the kind of thing that will stop a fade from ever running. For others who see AJAX-loaded content fade fine everywhere except Safari, here are focused checks and a small, reliable pattern to try.

First, quick checklist to isolate the problem: confirm the AJAX callback actually runs (put a console.log or debugger in it), open Safari’s Web Inspector and fix any JS exceptions (an early error prevents later animations), and test the same animation on static HTML to separate CSS/animation issues from AJAX timing. Check CSS too: a parent hidden or an element with display:inline, opacity forced by !important, or display:none !important can prevent visual fades. If the loaded fragment includes images, wait for them — layout or loading timing often causes perceived failures.

A simple, robust pattern that avoids timing surprises (uses $.ajax and forces a reflow before animating):

/* CSS: start hidden */
#ajaxContainer { opacity: 0; display: block; }

$.ajax({
  url: '/path/to/fragment.html',
  dataType: 'html',
  success: function(html){
    var $c = $('#ajaxContainer');
    $c.html(html);
    // force reflow in case WebKit needs it
    $c[0].offsetHeight;
    $c.animate({ opacity: 1 }, 600);
  }
});

If your fragment has images, wait for them before animating (count img load events or use an imagesLoaded helper). As additional troubleshooting: temporarily remove other scripts to see if a conflict is killing the callback, try .animate() instead of shorthand fades, upgrade jQuery if you’re on an ancient version, and only use CSS hacks like -webkit-transform: translateZ(0) as a last resort. These steps usually reveal the root cause quickly.

Member Avatar for xylude

Oops. It was another issue in my script that was making it not work.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.