Element not hiding on Safari (desktop only)

Ask the community
,
1

Hi, I have implemented a CSS preloader using the HTML insert element for the portfolio page of my website, so tht when a different tab is clicked the preloader appears while the repeater content is loaded in.

The problem I am having is that the preloader is always displaying on Safari desktop. On Safari mobile, Firefox (desktop & mobile), and Chrome (desktop & mobile) it is functioning correctly.
Please see the following GIF.

https://static.wixstatic.com/media/a27d24_144db629e1194d2f885ad92443bb9c8c~mv2.gif(image larger than 4 MB)

Please see the following image to see how it looks in the editor.

1920×1200 210 KB

Please see my code for the preloader to display and hide.

export function ShowLoadingCSS($w)
{
	$w("#repeater1").hide().then(() => {
		$w("#imgPreloader").show();
	});
}

export function HideLoadingCSS($w)
{
	$w("#imgPreloader").hide().then(() => {
		$w("#repeater1").show();
	});
}

Any help would be greatly appreciated.

Thank you

2

Hi Toby, I’m not sure why this is not working correctly, and we can look into that. But in the meantime, perhaps you can achieve the same effect using an Image element with an animated GIF rather than using an HTML Element?

3

Thank you Chaim, I appreciate your response. I have implemented a work around until you find a fix.

4

Hi Toby, just to make sure I understand the situation, what type of element is your " #imgPreloader "? Is it an HTML element? And how are you triggering the functions ShowLoadingCSS( ) and HideLoadingCSS( )?

It might be easier for me to understand if you post here the URL of your published site. Thanks.

5

Hi Chaim, thank you for your response.

" #imgPreloader " is indeed a HTML element that contains HTML and CSS to display the anitmation.

I have pasted the page code below to explain how the ShowLoadingCSS( ) and HideLoadingCSS( ) are triggered.

“#imgPreloader” = The HTML Preloader
“#repeater1” = The website image of the website displayed on the iMac

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixData from 'wix-data';

var prvSelection = "#btnAll";

$w.onReady( () => {
  $w("#dataset1").onReady( () => {
  		SetSeeMoreButtonDisplay($w);
	} );
} );

export function ShowLoadingCSS($w)
{
	$w("#repeater1").hide().then(() => {
		$w("#imgPreloader").show();
	});
}

export function HideLoadingCSS($w)
{
	$w("#imgPreloader").hide().then(() => {
		$w("#repeater1").show();
	});
}

// Show or hide the 'See More' button based on whether or not there are more results waiting
export function SetSeeMoreButtonDisplay($w)
{
	if($w("#dataset1").getTotalCount() > $w("#repeater1").data.length)
		$w("#btnSeeMore").show();
	else
		$w("#btnSeeMore").hide();
}

export function SelectCategory($w, _prevSelection, filter, category)
{
	$w(prvSelection).enable();
	prvSelection = _prevSelection;
	$w(_prevSelection).disable();
	$w("#btnSeeMore").hide();
	ShowLoadingCSS($w);
	
	$w("#dataset1").setFilter(wixData.filter()
		.contains(filter, category)
	);
	
	$w("#dataset1").refresh().then ( () => {
		// Reset 'See More' button
		SetSeeMoreButtonDisplay($w);
		HideLoadingCSS($w);
	});
}

export function btnAll_click(event, $w) {
	SelectCategory($w, "#btnAll", "category", "all");
}

export function btnEcommerce_click(event, $w) {
	SelectCategory($w, "#btnEcommerce", "category", "ecommerce");
}

export function btnBranding_click(event, $w) {
	SelectCategory($w, "#btnBranding", "category", "branding");
}

export function btnCopywriting_click(event, $w) {
	SelectCategory($w, "#btnCopywriting", "category", "copywriting");
}

export function btnRedesign_click(event, $w) {
	SelectCategory($w, "#btnRedesign", "category", "redesign");
}

export function btnWixcode_click(event, $w) {
	SelectCategory($w, "#btnWixcode", "category", "wixcode");
}
export function btnActivate_mouseIn(event, $w) {
	$w("#txtTitle").show();
	$w("#txtDetails").show();
	$w("#boxShade").show();
}

export function btnActivate_mouseOut(event, $w) {
	$w("#txtTitle").hide();
	$w("#txtDetails").hide();
	$w("#boxShade").hide();
}

export function btnSeeMore_click(event, $w) {
	$w("#dataset1").loadMore().then( () => {
		SetSeeMoreButtonDisplay($w);
	});
}

My website link is https://www.tobymcdowell.com/portfolio/ but for now I have hidden the HTML element behind the repeater so that it is only displayed when the repeater is loading.

Thank you

6

Hi Toby, we are still investigating but there’s a bug in what we think is a related case that affects only Safari. A developer is working on it now. I’m sorry you ran into it, but thank you for reporting it so we can fix it!

In any case, I’m glad you found a workaround. Take care.

7

Thank you for the update Chaim, sounds like you ar on the right track. If you could let me know when it has been fixed that would be great!