I’m facing a problem similar to the one in this forum, but with images instead of text: Pixelated Text when scaling on Safari/iOS
what im trying to do
I have a group of images that I want to:
- enlarge once the user clicks (or hovers) on them.
- have the clicked on image be the one on top (the images are on top of each other with corners and pieces of each showing). (i achieved this by turning on the draggable feature).
the problem
I’m facing a problem of the images being pixelated after being clicked on.
Some context for the devs if it may help:
- This is happening on Safari. I tested it on Brave, no pixelating occurred. (Tested both only on desktop).
- This happens in preview mode, as well as published site. (Thought publishing might yield diff results).
- My image is high-res (it’s not the image). I also tried a medium res to potentially try to avoid some internal scaling-down by ReadyMag or Safari (if that even happens), but same results).
- My image’s format is png, but I tested jpg and svg and got the same results.
The workaround I figured:
After an hour or two of testing back and forth, I got to avoid the scaling in safari by placing the image already enlargen-ed on the site, then added an (on load) animation (type: scale) and downsized them to a visually-normal size, then added the original (on click) animation of enlargening. This fixed the pixelation but causes (#2 of my goal above) the clicked on image to not move to top, meaning if any nearby images whose order is higher (are on top of that clicked-on image), they remain to be on top. (I confirmed that adding an (on load) was the problem because it no longer happened when i removed the (on load) scaled animation.
lol quite a bit of detail but wanted to explain the issue thoroughly.