Bug 164584

Summary: Image does not rerender when zoomed, becomes blurry
Product: WebKit Reporter: Max Langer <maxlanger>
Component: ImagesAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Minor CC: ap, czirkos.zoltan, dino, simon.fraser, zalan
Priority: P2    
Version: WebKit Nightly Build   
Hardware: Mac   
OS: macOS 10.12   
Attachments:
Description Flags
Some further investigation into the problem by the owner of the plugin. none

Max Langer
Reported 2016-11-10 01:50:18 PST
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
Attachments
Some further investigation into the problem by the owner of the plugin. (123.94 KB, image/png)
2016-11-10 01:50 PST, Max Langer 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1 2016-11-12 23:25:26 PST
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.
Max Langer
Comment 2 2016-11-13 10:00:08 PST
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.
Simon Fraser (smfr)
Comment 3 2016-11-13 19:02:27 PST
> does not rerender when zoomed, becomes blurry So does it not render at all, or render blurry?
Simon Fraser (smfr)
Comment 4 2016-11-13 19:02:59 PST
I can't tell from the description how to reproduce the issue. Please give the specific URL and steps.
Alexey Proskuryakov
Comment 5 2016-11-13 22:02:53 PST
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.
Simon Fraser (smfr)
Comment 6 2016-11-14 08:28:17 PST
This is effectively 27684. Easiest fix is to not use transforms to scale up the image.
Max Langer
Comment 7 2016-11-15 10:01:05 PST
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.
Simon Fraser (smfr)
Comment 8 2016-11-15 10:04:00 PST
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).
Max Langer
Comment 9 2016-11-16 00:40:21 PST
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!
Czirkos Zoltan
Comment 10 2017-09-10 04:37:42 PDT
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>
Note You need to log in before you can comment on or make changes to this bug.