T
Join ServerTyphonJS
typhonjs-runtime
Blur on moving elements
After a few months of being gone, this started showing up for me again. Not sure why.
It seems that while an element is transitioning, it blurs, and sometimes doesn't unblur.
Only happens when zoomed in larger than 100%. Only happens on Chromium browsers. Does not seem to consistently happen with the same elements from session to session.
Tested with TJS 0.22 and Edge 112.0.1722.39. I expect its probably a change Chrome made to how it handles things, but wanted to document this here in case there is something to be done about it. Example in the attached gif.
It seems that while an element is transitioning, it blurs, and sometimes doesn't unblur.
Only happens when zoomed in larger than 100%. Only happens on Chromium browsers. Does not seem to consistently happen with the same elements from session to session.
Tested with TJS 0.22 and Edge 112.0.1722.39. I expect its probably a change Chrome made to how it handles things, but wanted to document this here in case there is something to be done about it. Example in the attached gif.
Yeah... This is going to be a tricky situation to resolve. My general understanding is that browsers that are Chromium based are not going to necessarily have the same features / performance tuning / rendering performance across the board with Chrome. IE Chrome based on configuration can have different optimization paths enabled than other Chromium browsers. This aspect could explain the differences you see between Chrome & Edge.
I mainly only test w/ Chrome and then a bit w/ Firefox.
One thing that can help in this case is to create an independent example that runs on the Svelte REPL that shows the rendering flaw. It certainly doesn't hurt trolling through any of the public bug list on the Chromium project. I don't think there is anything public for the Edge browser. If you can isolate the problem with the minimal amount of code even if Svelte is involved then it makes it easier to post a bug on the Chromium tracker or even try to contact anyone w/ the Edge team.
Are you using any
---
Not related, but we'll potentially see this configuration difference w/ the launch of Chrome 113 which is enabling WebGPU by default, but not all Chromium browsers may enable the same built in features in follow up releases.
I mainly only test w/ Chrome and then a bit w/ Firefox.
One thing that can help in this case is to create an independent example that runs on the Svelte REPL that shows the rendering flaw. It certainly doesn't hurt trolling through any of the public bug list on the Chromium project. I don't think there is anything public for the Edge browser. If you can isolate the problem with the minimal amount of code even if Svelte is involved then it makes it easier to post a bug on the Chromium tracker or even try to contact anyone w/ the Edge team.
Are you using any
svelte-standard
components like TJSSvgFolder
?---
Not related, but we'll potentially see this configuration difference w/ the launch of Chrome 113 which is enabling WebGPU by default, but not all Chromium browsers may enable the same built in features in follow up releases.
I use some svelte standard components, but none in this particular application. I'll see if I can get a more solid repro case
Let me know when you can throw up a Svelte REPL example and I'll take a look. This particular case could come down to hardware configuration vs a specific issue in browser support. Getting an idea if this is a common occurrence across hardware configurations would be the next step to verify. This takes into account your experience for instance w/ the past blurring issue where it existed on my setup, but was more subtle vs pronounced.
Not related: For instance now that Svelte supports container queries I will be coming up w/ a REPL example that showcases this assumed Firefox flaw: https://bugzilla.mozilla.org/show_bug.cgi?id=1805945 vs the current demo which is more complex and requires a checkout of a repo / build / run loop.
The less code and easy way to run it via the REPL is better for getting more eyes on the potential problem.
Not related: For instance now that Svelte supports container queries I will be coming up w/ a REPL example that showcases this assumed Firefox flaw: https://bugzilla.mozilla.org/show_bug.cgi?id=1805945 vs the current demo which is more complex and requires a checkout of a repo / build / run loop.
The less code and easy way to run it via the REPL is better for getting more eyes on the potential problem.