text disappearing issue

[DrunkenPipe]

how it should look.


how it printed out

Despite the fact that the zoom level are 100%, the bug happen on my edge browser somehow when im almost done.
i don't know how to recreate it on browser like chrome since it happened randomly

[DrunkenPipe]

terminate the browser and reopen it again seem to do the trick this time, it gone now.
I really don't know why it happen. my session last around an hour and a half and it started bugging out like this at the very last moment

[DrunkenPipe]

wait a minute, now that i look more closely at the image, the downloaded missing text one have the character name in a thinner font!

[U1805]

sorry but i still cannot reproduce this bug now. perhaps you could provide more information, such as your screen resolution, zoom level in setting and browser. i think it might be caused by having the zoom level set too low.

[DrunkenPipe]

my screen res is 1920x1080, Edge Browser Zoom level is 100%, tried switching back and forth between 110% and 100% to see if it can fix it back then. The site zoom setting that you put in seem to be perfectly functional and didn't cause it.
close and repopen browser fix it but i don't know how to replicate the bug either. as i said before, the downloaded image file have it font in different style, maybe there is something wrong with it?

[DrunkenPipe]

im thinking this issue should prob be closed as it is a dead end.
i will close it by tomorrow if there aren't any development

[U1805]

No, please keep this issue open. Let's wait to see if someone else encounters the same problem or can reproduce the bug. Only then will I be able to attempt a fix.

If no one else reports the issue for an extended period, I might consider it to be a problem specific to your personal device rather than the website itself, and I will close it at that time.

[bobby233]

I've encountered the same problem and yet another one when I shut down the server!

The following images are shown in the time order.

The font was lost in the downloaded image but existed in the browser because the font file is from the server, and maybe the cache is lost. But the avatar still existed as it is stored on another server on the Internet, and the rendering program dom-to-image.js attempts to get it from that server, as shown in util.getAndEncode(url).

I also wonder why the same avatar was loaded three times.

The other problem, shown in the first image above, occurs more frequently, where avatars disappear. What is worth mentioning is that even though the server is alive, this problem often occurs. From my perspective, the lack of time for rendering webp images inside SVG images is to blame. In dom-to-image.js, the draw(domNode, options) function requires a time delay after generating the SVG image, which can let the image to be loaded. When I set the time delay to 1000 or more, the problem is solved, but this can't be the ultimate solution.

What if we use a more powerful module to render images? 🤔

[U1805]

Your problem seems different from what DrunkenPipe encountered. His problem appears related to page layout - text disappearing due to line breaks while the chat bubble height remains sized for a single line, causing the last word to appear outside the bubble. Light gray text against a white background then appears to "disappear." I can't reproduce this specific issue, which is why I'm keeping this issue open.

---

when I shut down the server

You're correct about the font issue - when the server is shut down, the font file can't be loaded since it's stored locally on the server, while avatars from external servers remain accessible. The surprising part is that you can still access the page after shutting down the server, which might be due to browser caching of the page content.

I also wonder why the same avatar was loaded three times.

Regarding the avatar loading three times: Each time the image appears on the page, so i used vue3-lazyload. The image is loaded from the cached Blob URL. The different URLs you're seeing are due to the nature of URL.createObjectURL(), which creates a unique reference each time it's called, even for the same underlying data.

Regarding the other problem, I can't consistently reproduce it either, but it does seem to exist. I've noticed that the second download attempt usually works fine. Perhaps we could implement a mechanism that tries downloading twice, like tsayen/dom-to-image#343 (comment) (though not very elegant)? Setting a time delay could also be considered as a temporary solution until we find a better rendering approach.