Ghosting Issues on Windows & Mac + Blurry elements

Troubleshooting
1

Hello penpot team and community,

  1. I have been noticing ghosting issues on Microsoft Edge Version 109.0.1518.70 (Official build) (64-bit) on Windows especially pertaining to text. (You can notice from the screenshot that there is ghosting when a portion of text is selected / highlighted vs when there are no selection. The location of the text changes in both the cases). I have a screen recording as well but the forum didn’t allow me. If needed, I can share that separately

    penpot_ghosting
    penpot_ghosting1856×710 174 KB

  2. I also encountered a day before where the undo function doesn’t seem to be working and history was messed up (I was not able to record and reproduce that now, but something I wanted to point out)

  3. Rendering in browser leaves blurry elements at times. Please refer to the attached screenshot of the same screen, where the one on the right has clean text, while the left one has blurry element. In the second screenshot, both are blurry. (Not allowing me to post more than one screenshot. Will put them in replies)

On another note… on Mac in Safari, I noticed ghosting issues across elements. I also saw that someone has raised a bug request for that already. However, I just wanted to highlight that out.

1 Like
2

Here are the screenshot for blurry elements

screeenshot_1_blurry_clear
screeenshot_1_blurry_clear1876×776 285 KB

3

Next screenshot

screeenshot_2_blurry
screeenshot_2_blurry1878×792 233 KB

4

Is there a way for others, i.e. Penpot Developers, to build something that will lead to the text ghosting, and if yes, can you describe the steps? Otherwise it is hard to fix since people would need to try to see what happens in the code and data.

5

I understand what you are trying to say. I just created a layout and added a textbox and noticed this ghosting happens. I tried reproducing the steps and I was able to reproduce it.

  1. Add a textbox of width 320 and add some text - You can use the same text - In today’s edition of the Evening Wrap newsletter, we cover biggest news happened during for the day from Budget 2023 to PM Care Fund’s response to Delhi HC. Scoll down to read more…
  2. Change the font to Merriweather. I noticed the same ghosting happening with Faustina, Fenix, Fondiner Swanky, etc. also
  3. Increase the font size from 14 to 16
  4. Keep line spacing at 1.2
  5. Double click to select the entire box of text. You will notice the ghosting.

This happens regardless of the text alignment (left, right, centre or justify) and text position (top, center or bottom)

Please let me know if you were able to reproduce this

1 Like
6

I can’t replicate it (Edge, Win11)
(I don’t doubt that it happens to you!)

1 Like
7

The blurriness is something we do for performance sake. When the user is not working with a frame we put an rendered image instead of the whole frame, that improves the performance greatly but it’s true sometimes it’s a bit ugly. We’re always working in ways to increase the performance so I hope someday we’ll be able to have a better way.

About the text, It would be of great help if you can share the information about the font and text options you have selected. The “out of sync” is because the text editor is a different layer from the SVG tex rendered, if the CSS don’t match exactly this could happen. Maybe there is a configuration or something specific of Edge that is messing the styles.

2 Likes
8

Noted. Thanks for the clarification on blurry images.

Unfortunately, the out of sync issue happens also on Chrome Version 109.0.5414.120 (Official Build) (64-bit). I have attached the sample file here, which you may inspect. I am on windows 10. I will try and test this file with other computers and see if this issue still happens.
Sample & Testing 1.penpot (4.6 MB)

1 Like