Trouble with hidden layer flashing on page load

Question
1

I’ve produced a series of landing pages for a client wherein a large image loads in a wide box, and a second wide box, filled with transparent black and grouped with a “Coming Soon” message, is layered over the top but set to have an initial Opacity of 0%. An animated scroll action changes the Opacity of the black overlay wide box from 0% to 100%.

Here’s the problem: when either of the landing pages loads for the first time, the black overlay wide box with it’s “Coming Soon” message flashes on the screen. This should not happen. The overlay should only appear once the user begins to scroll the page.

What might be the problem here?

LINKS:
Page 01

Page 02

Page 03

2

The problem as you describe it does not occur on my machine. Everything looks the way you intended.

1 Like
3

Hello.

I see what you mean, but can’t explain it.
The words “website is coming soon” flash for a few milliseconds and then disappear.

If the page has already been loaded once, maybe the data is already in the cashe and the effect doesn’t occur anymore.

Only a Sparkle expert can answer that.

Mr. F.

4

@mOehlschlager, it seems it is related to the browser engine…

  • All three pages work fine on Safari
  • First page works fine on chromium (google chrome, brave, etc…), but not the last two

The pages tripping up on the chromium engine seems to be related to the large image background.
I’m thinking Duncan (@duncan) could give you a further understanding to what might be going on…

1 Like
5

@FlaminFig Thanks. The images could stand to be compressed more, but I relied upon Sparkle to do the image sizing and compression as per the online documentation.

Still, that’s a separate issue, and I don’t understand why the grouping of the dark overlay wide box and the “Coming Soon” text would flash on page load when I’ve configured it to have 0% opacity until a page scroll action.

Hopefully Duncan has some insight into this.

1 Like
6

If you suspect something to be a bug, it certainly could be, but it’s not something we can easily look at with just the published site. Please send the project files and we’ll take a look.

7

Do I attach the project file here?

8

Sending it via wetransfer.com to feedback@sparkleapp.com would work.

9

Okay. I’ve sent you the Sparkle file via wetransfer.com. Thanks for having a look.

To quickly recap, my objective was to have a page scroll trigger an opacity change for the overlay grouping of a dark wide box and a short text element “Website Coming Soon”. I configured the group to change opacity from 0% to 100% upon scroll.

Unfortunately, the exported site published to the web server has a problem where the dark overlay flashes on the first page load.

10

@duncan I realize that you’re still analyzing my Sparkle file, but a thought just occurred to me: Do you think that the reason for the flashing overlay is that the CSS style information generated by Sparkle is not being read/interpreted until after the overlay has been rendered and displayed? Is this something that can be controlled by the order in which the CSS and HTML elements are written and therefore read and interpreted by the browser?

11

Thanks for offering help, but the issue is much more complex. We’re on it.

1 Like
12

I’ve noted similar effects one of my sites, ppemail.net.

Some opening text/images on my landing page are set to 0% initially and are to appear upon scroll. However, they flash upon initial load, after refresh, and more pronounced after emptying cache. It happened regularly on Safari browser v 14 and continues on 15.

Seems Sparkle program loads them then activates opacity. Perhaps opacity needs to be set first before loading, but I suspect it is more complicated as @duncan noted. :wink:

Thanks for the work on this.

13

Could you also send the project via wetransfer.com to feedback@sparkleapp.com so we can take a look to that too. Thanks.

14

Will do, but would my professional file sharing service (ppecloud.net) be acceptable? I prefer to not use public/free services.

16

@PPEmail i am wondering if your project file is so mega important. Who says your cloud system is safer?
Duncan offered you help and the best practical way to help you quick and not use most of his precious time.
I reckon you send the file as he wishes or leave it.
Duncan is a really busy person he does developing, beta testing and support for us.
Just wanna say this here.
Thank you.

17

@MiWe It’s all good. Late evening in Aussie land, eh? Perhaps it’s time for a beer :beer:. Can you easily get a good German one there? My treat if you can and send your PayPal contact backchannel. I’m working on my first cup of joe :coffee: for the day. You treat my second? :slight_smile:

The team (Duncan?) accepted the alternative upload without complaint. It was efficient enough; more so than wetransfer in my opinion. Sparkleapp’s (Duncan’s?) ‘World class support’ was on clear display as they (he?) “answer[ed] quickly and competently” just as the footer claims. Unsure, yet, if the they “[made my] Sparkle website succeed.” Certainly they fixed the programatic bug to eliminate the pre-load flash of my ‘hidden’ content. See their talented work displayed. On a desktop, hit refresh a couple of times on Safari and Firefox (I’ve not tried others):
old version
new version

You ask if ppecloud.net is safer. I believe it is, certainly much less intrusive than wetransfer. Try these two (quick) assessments:

Comparison A: In-your-face adverts
A1. wetransfer
–landing page: perpetual onslaught
–transfer page: full screen advert REQUIRED during upload
–download page: unknown; and prefer to not subject myself to it
A2. PPecloud
–landing page: NONE
–transfer page: NONE, because I paid for it
–download page: NONE, because its paid for

Comparison B: Privacy & tracking
B1. wetransfer
–landing page: trackers blocked by Safari & Firefox
–transfer page: couldn’t get to it without agreeing to their non-private ‘privacy’ statement.
–download page: unknown; and don’t care to learn
–password protection? NONE, unless I pay for the pro version (interesting convergence here, eh?)
B2. PPecloud
–landing page: NO trackers
–upload page: NO trackers, because I pay for it
–download page: NO trackers, because a paying client (me) shared it
–password protection: top-level REQUIRED

FWIW: wetransfer uses Amazon Servers and Google tracking. May I suggest you digest their ToSs before snarkily belittling someone who has developed/is developing a less intrusive file sharing and associated email service. Unlike gmail, hotmail, yahoo!mail, and the like, PPemail does not scan or track your online actions. Fastmail (Sparkleapp’s provider, I believe) is better but its ‘privacy’ policy is a bit squishy.

I believe professionals—perhaps this is the operative word—would prefer to pay for quality services rather than accept the not-so-hidden costs of ‘free’-mail/storage. As the becoming-classic phrase notes: When its free, your acts are the product (my paraphrase).

There are alternatives to the ‘free’-mail cabals. PPemail.net is working to become one, and it costs as little as one (cheap) cup of coffee per month. Perhaps its time to give up one of those cups, MiWe, and chill with PPemail :grinning_face_with_smiling_eyes: (refernce my above suggestion). For me anyway, there was/is no WHEEE in wetransfer :smile_cat:.

Peace, my Sparkling Colleague. :dove:

1 Like
18

Good to hear that everything is alright.
Wish you all the luck for the future.

Michael