Created attachment 294349 [details] Some further investigation into the problem by the owner of the plugin. On our website (www.developmint.de) we use the Fluidbox plugin for displaying images. When zoomed however, these images are not rerendered and therefore look blurry. It is not 100% clear what is causing the issue, but setting the navigation-bar-container width to less than 100% fixes the issue for the second image. I found an issue on GitHub describing this very problem (https://github.com/terrymun/Fluidbox/issues/168) As mentioned in the comments there, something is preventing WebKit (or Safari (Sorry if I am wrong here)) from rendering the image correctly. I extracted the comparison for you: http://fluidbox-crisp-safari.jouwweb.nl http://fluidbox-blurry-safari.jouwweb.nl
Steps to reproduce: click on cat images on both pages to zoom. This is not a plug-in in the way we'd use this word; just CSS and JS. I don't know if this is expected behavior.
You are right, their website uses the name "plugin", but it is only JS and CSS. Sorry for that. Also, this is only an example to reproduce the bug.. Strangely, this problem does only occur on macOS, not iOS. I am not sure if this the right place for this bug. If not, i am very sorry.
> does not rerender when zoomed, becomes blurry So does it not render at all, or render blurry?
I can't tell from the description how to reproduce the issue. Please give the specific URL and steps.
The URLs are in the description: > http://fluidbox-crisp-safari.jouwweb.nl > http://fluidbox-blurry-safari.jouwweb.nl And the steps are in comment 1: open the URL in Safari and click on cat images on both pages to zoom.
This is effectively 27684. Easiest fix is to not use transforms to scale up the image.
27684 describes the blur which occurs during transition. In this case the blur still exists after the transition finished. The image does not become sharp at any time. Please correct me if I am wrong.
It's still because the image is in a compositing layer which has the scale applied to it. Turn on layer borders in the web inspector to see (the little 4 boxes in a square icon).
Ok, I have managed to fix it in my particular case. I guess you can mark it as duplicate? Thank you for your time and patience!
The problem only arises if there is a position:fixed element on the page, and it is below the image that is scaled. See the following HTML: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"> </head> <body> <p style="position: fixed; background: yellow; width: 100%;">Fixed</p> <img src="http://placehold.it/2000x2000" style="width: 20px; transform: scale(10); transform-origin: 0 0;"> </body> </html>