jQuery hide/show Safari Bug
March 17th, 2008
I’ve noticed problems in Safari with the hide/show methods of jQuery on and off for quite a while now. Basically they don’t work. Correct me if i’m wrong. This behaviour also extends to the fadeIn/Out methods.
The problem can be circumvented to applying css rules directly to the element(s) in question.
// This will fail in Safari
$(element).hide()
// But this will work
$(element).css('display','none')
A quick google reveals that lot’s of people have come across this same issue, but no definitive answers.
Posted in Web | Tagged with: JavaScript, jQuery
June 19th, 2008 at 10:06 am
Update: Ticket opened here http://dev.jquery.com/ticket/3038
December 18th, 2008 at 10:59 pm
I came experienced this error too after an animate where i get the element through the animate callback.
el.hide(), el.css(‘display’, ‘none’) and el.style.display = ‘none’;
did not work in safari or firefox
I fixed it using el.fadeOut(0) there still is a fadeOut in firefox and safari but it works without removing the text (.empty() works without an delay but causes you to lose your data.)
February 5th, 2009 at 7:21 pm
This fixed my problem when the element I was attempting to show and/or hide was already hidden by its parent.
Thanks for the tip.
May 4th, 2010 at 1:50 pm
It is 2010!
I met this bug in Safari and Google Chrome, so with WEBKIT
In fact, I don’t use directyle show(“slow”) but an accordion made by http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/accordion.html
In fact, have you found the solution of your problem?
August 18th, 2010 at 8:07 am
Greetings members,
Who doesn’t need luxorious treatment while on holiday? Luxurious appointments, five-star meals, and amazing activities are available on all the ships from Crystal Cruises and Oceania Cruises. Tauck Tours features unique vacations at 98 unique places. When your family use Elite Cruise & Travel, your family can rest assured that your holiday will be just what you imagined.
August 30th, 2010 at 8:01 pm
I was having the same problems with Safari. el.fadeOut(0) worked for me in Safari. el.css(‘display’, ‘none’) did not.
October 21st, 2011 at 10:31 am
I just had the same problem and solved it by adding a callback:
el.fadeOut(function(){ $(this).hide(); });
seems like jQuery does the animation but Safari isn’t displaying it because it waits the time and then hides it.
So, this way it works at least…