It’s allmost Christmas and some may want to use Norm’s “Snow” bric.
So far so good.
But weird things happen when you preview your page with Safari and Orion.
The mouse cursor stutters. Not only on the browser but on the whole screen.
All good with other browsers.
Just checked this out @Bootsie. It’s working fine here on some test sites running under Sequoia, in various browsers. Wonder if this is some kind of MacOS Tahoe issue?
I don’t have my laptop (running Tahoe) with me in the office, so I’ll check on that later today and get back to you.
There are certainly (still) many (current) reports of Safari having issues, slow, sluggish, under MacOS Tahoe from users.
@Bootsie, are you maybe setting the count really high for the number of flakes?
Norm, there does not seem to be a restriction for max number regarding the input for the Bric, even in the updated version. Probably should be restricted within reason, at a minimum.
The library used (pure-snow.js) can have issues concerning performance regarding too many snowflakes (depending on user specs). It’s said to work in every modern browser, however it’s not an optimized approach that this library uses, quite the contrary actually.
So this and the present Safari issues under MacOS Tahoe could be coupled together to make it more obvious?
Using Canvas with various optimizations would be far more performant for such an effect, it could even include different counts across breakpoints as one optimization to lessen the load across various device sizes. The Confetti bric to snow idea might be a good idea, since its canvas.
Using the default setting (400) causing problems.
Even in Blocs preview the cursor is hardly to control.
When you reduce to 200 it’s far better.
100 looks like smooth mouse move.
If 400 causes issues, 200 works better and 100 was smooth, then I would say its what I already described above.
Add to that your 8GB of memory and macOS Tahoe using more memory, coupled with Safari within Tahoe having performance issues, coupled with the 3rd party library the Bric uses not using an optimized performant approach. It can be the perfect storm (no pun intended) for some users and devices to experience issues.
I would be curious regarding the mention of “stuttering and glitchy” on iPhone 15 Plus and iPhone 15 by @AdieJAM and whether those phones are running iOS 26 which presently has the same / similar Safari issues as macOS Tahoe.
Back to the snow – for instance400 flakes - means 400 divs, 400 instances of filters and opacity, 400 @keyframes animations, plus 400 instances of .snowflake:nth-child & @keyframes totaling approx: 5200 lines of CSS for 400 snowflakes. Then in the JS upon resize it redoes it all again.
Hopefully someone understands the ^ implications concerning performance shown here. Without the need for testing on all their clients devices to see how it may perform, don’t assume.
So without getting further into the actual performance technicalities of the above method used by the pure-snow.js library that this Bric uses, I will instead again say – it’s far better to useCanvas for such effects.
Folks to make it clear,
I don’t need a snow bric maybe others do.
I was just curious how this snow bric from Norm looks and how it works and I found this cursor problem.
But anyway … I appreciate your work and hopefully others will use your brics.
Thanks a lot everybody.
Safari tends to choke on heavy canvas effects and the Snow bric likely pushes it a bit. The stutter across the whole screen hints at a rendering loop that never settles. A quick check in the inspector usually shows it. Dropping the particle count or switching to a lighter animation script often clears the issue.
BlocsTools, you’re leveraging a much better utilization of CSS within your approach, continue seeking further optimizations and performance opportunities within your script. Sorry to say, but that code obfuscation is illusory anymore for the security of your code.