UX: The Photoprism logo/icon in the loading screen is deformed when the viewport is too large (>= 2560x1216px)

[1oh1]

What does not work as described in the documentation?

The prism icon in the Photoprism loading screen is deformed when the viewport is larger than or equal to 2560x1216px

How can we reproduce it?

Steps to reproduce the behavior:

0. Have 27 inch monitor set to1440p resolution?
1. Open Google Chrome (tested on version 102.0.5005.63)
2. Navigate to https://demo.photoprism.app/browse
3. Open Developer Tools (Ctrl+Shift+I) and dock it to the bottom of the screen
4. Navigate to Network tab
5. Click on No Throttling
6. Add a custom throttling preset called Slow with Download and Upload set to 50 kbit/s
7. Set throttling to the Slow preset
8. Right click on the Reload button and select Empty Cache and Hard Reload
9. Wait until the Photoprism loading icon shows up
10. Resize the Developer Tools region to multiple sizes while the loading screen is showing up and observe the deformation of the prism icon when the viewport size is larger than or equal to 2560x1216px

What behavior do you expect?

No prism icon deformation at any resolution

What could be the cause of your problem?

Faulty CSS?

Can you provide us with example files for testing, error logs, or screenshots?

https://i.imgur.com/HbJUrjH.mp4

Which software versions do you use?

PhotoPrism® Plus (Build 220528-efb5d710)
Google Chrome (version 102.0.5005.63)

On what kind of device is PhotoPrism installed?

Unsure. I noticed it on the Photoprism demo server

[graciousgrey]

Thanks for reporting :)

[heikomat]

i don't think it's faulty css. It seems to be something about how chrome renders that specific svg to the actual screen. This bug seems to not happen on firefox. The size in css-pixels seeems to be irrelevant, only the size of real device pixels seems to matter.

Look at these two screenshots. in both cases the website is 440x726 css-pixels in size. The first one is at 100% virtual-screen-scale, the second one is at 50%. So everything is equal, except for the size on the actual screen.

100%	50%

[1oh1]

Seems like a Chrome rendrering bug? I noticed it's reproducible on several different viewport resolutions. It's also reproducible on Edge (102.0.1245.39) as well but I could not reproduce it on Firefox (101.0.1)

An easier way to reproduce it is to simply open the Photoprism logo SVG file and change/scale the viewport resolution.

I tried 'optimizing' the SVG using a couple different services but all SVGs had the same issue.

[heikomat]

Removing or changing stuff in either the 4th arc (a.13.13 0 0 0 .11.19) or the 5th arch (a.12.12 0 0 0 .1-.19) or the line between them (l182.18-.8) seems to fix all rendering issues.

The 4th arc is the rounding for the bottom-left corner. The 5th arc is the rounding for the bottom-right corner and the line between them is also visually the line between these corners
In the following image, both arcs (but not the line) are removed:

The takeaway here is, that these 3 commands should be investigated further. The other ones seem to be fine

[lastzero]

Note that there are several versions of this SVG with slight differences, such as padding and tiny-ps standard compliance, see https://dl.photoprism.app/icons/:

• logo.svg
• tiny-ps.svg
• unpadded.svg

From what I remember, the inline version currently used in the bootstrap template is based on logo.svg, but sent through svgomg. Not 100% sure though, also what settings I've chosen (there are plenty of toggles).

It does make a difference, especially when scaling the SVG. If I use the original files, I can't resize them with CSS at all. I haven't had time to find out why this is or if there are other options...

Seems like a great task to figure out for a contributor!? 🤗

[dinoschachten]

Perhaps not particularly helpful, but noteworthy: I cannot reproduce this on macOS, tested it on two Macs in Chrome 103:

• 27-inch (non-retina) iMac (2560 x 1440)
• 15-inch Retina MacBook Pro (2880 x 1800)

[lastzero]

Only happens to me with browser zoom enabled. Likely due how we calculate width and height based on the browser viewport.

[dinoschachten]

I have to correct my statement above: I can get it to "flicker" while changing the size (apologies for not testing thoroughly enough), meaning as I change the size of the viewport, a few specific height values produce this phenomenon, while most don't (with and without browser zoom).

For instance on the retina MacBook, the viewport size 1440 x 608 (which is in fact 2880 x 1216 due to the doubled retina resolution, fittingly) reliably produces the effect, but both increasing or decreasing the height will make it go away until you hit the next value that produces it.

The way in which the SVG deforms looks exactly the same for me as depicted in the video by @1oh1 though

It's interesting that the behaviour seems to differ between OSs, I'm tempted to blame the (perhaps even OS-dependent) implementation of SVG calculation/rendering in Chrome given the inconsistency between different Chrome versions, so this might not even be a Photoprism-related bug, but one that could be worked around by adjusting the logo SVG. But that's far outside my zone of competence and fairly speculative.

[lastzero]

The splash screen will be changed again with the next release, so I think we can close this issue, although I'd still like to know how to use SVGs so that this doesn't happen. It might also depend on the browser version, as I've seen deformations happen frequently on older phones.