Board content is blurry until you hover your mouse over it

Troubleshooting
1

Hi Community,

Just wondering if anyone else has this issue. Sometimes the content on my boards (type, cards, anything) is blurry until I hover my mouse cursor over it, then it becomes crisp and clear until I move my cursor away again.

Any advice would be appreciated.

Thank you.

2

Yes, same issue for me.

1 Like
3

Troubleshooting steps that I’ve tried so far:

  • I tried a different browser - same result.

  • I tried adjusting graphical settings - same result.

if someone perhaps knows about a solution for this it would be appreciated as it is pretty annoying and distracting when you’re working on a project but it looks blurry and displays incorrectly.

4

Is this on the main design.penpot.app instance or a self hosted instance? Have you checked your browser’s console log for errors? I had a similar issue on my self hosted instance which I was forwarding to a public domain using Nginx reverse proxy manager. My issue was that the PENPOT_PUBLIC_URI value in the penpot-backend docker config was still pointing to my localhost. When I updated it to the public URL my thumbnails and boards started loading in normally.

5

Hey @erreib ,

Thanks for the advice. This is happening on the main design.penpot.app instance. I didn’t note any errors logged but what I did notice:

  • I have two boards. If I select a board then the other board is blurry, if I select that board then the one I selected first is blurry again.

  • It seems that this is happening as soon as you have a few grouped items on a particular board. If I ungroup everything, then the blurriness disappears.

Very strange indeed…

6

Hey @SynMir

It makes sense you see a small blurry until you hover. Penpot actually renders all the content in svg and browsers have performance problems when rendering huge svg files. Penpot generate thumbnails for boards so that we can increase the performance not rendering on svg all the content, just the one you are working with.

When you move the mouse from one board to another the thumbnail is enabled for the one you left and the one your are over is rendered, that’s why yo see that small blurrinness.

1 Like
7

Hey there @Alex ,

Thanks for your response. I get what you’re saying and appreciate the input. It never used to be this way, that’s why it seems a bit strange to me.

I feel Penpot is still a bit buggy because I logged back into my project (after being away for a few days) and the size of my boards adjusted by themselves…

I’ll stick it out and see if this maybe gets addressed in a future update.

Have a super day ahead!

8

Thanks @SynMir !

Thumbnails have worked this way for a long time…could you please attach a video of what’s happening to verify there is no extra problem?

If you could also explain a bit more (videos, screenshots…) about what it means your boards adjusted by themselves that would be great :wink:

9

Hi there @Alex ,

I’ve attached a .GIF file as I can’t upload the full video. Hopefully, it’s clear enough but if I hover over one of my boards, the other board is blurry, if I hover over that board, then the other one becomes blurry. It’s nothing major but it is a bit distracting. To be clear, this is when I am working on two different boards within a project file, not the thumbnails I see when I first log into Penpot.

Regarding the boards adjusting by themselves - it’s only happened twice where I would log out of Penpot, log in again after a couple of days and find the elements on my boards are no longer aligned properly or have moved to different areas on the canvas. I will try to take a screenshot of this if it happens again.

Thanks for your advice.

Board Blurriness

10

Yes, that’s exactly what the thumbnails actually do, when you hover over a board the “real” svg is rendered and the other is replaced with a thumbnail image