2

I'm working on a zoom function for my company and an outfit builder we've made. As the image to be zoomed is a composite of different layers, we can't use the normal image/larger hidden image zoom, so I've worked up something using transform: scale and translate.

It basically calculates position + a bunch of other stuff and once the user clicks the zoom button, it clones the existing outfit image section, replaces all the layer images with hi-res ones, then uses jQuery .css to add: scale(3) translate(6px, 180px) for example. This is then recalculated and updated if someone alters the slider or drags the image around. This works nicely as it gives a decent experience and with some constraints allows the user to drag the composite image around and view different parts of it.

It was all working PERFECTLY in firefox/ie and then I tested it in Chrome - and found that after a short delay, my zoomed image became blurry after changing the zoom level. I've tried all the solutions out there (webkit-filter: blur(0), image-rendering, adding a pseudo element, trying to force it to re-render etc) but haven't managed to solve the problem.

It only seems to happen in webkit browsers. I've tried updating the main image holder (not the zoom image holder) to the hi-res images, and then adding the scale transform manually, and it seems to zoom okay in that instance - but once you add translate into the mix, it goes wrong.

what is shown in chrome:

enter image description here

code for this particular section:

enter image description here

Any assistance would be gratefully received.

Andy Seaton
  • 29
  • 2
  • Does this [answer](http://stackoverflow.com/a/6898097/1506551) help? – Patrick Stephansen Oct 08 '15 at 11:20
  • 1
    we usually like to see the code as formated code rather than screenshot – dllhell Oct 08 '15 at 11:46
  • hi patrick, my issue is that all the answers out there seem to work for fonts, svgs or single images, whereas my use-case (a div full of absolutely positioned layer images) hasn't really been considered and as such, none of these solutions seem to work. I've been in touch with the chromium dev team and hopefully they can sort something out. – Andy Seaton Oct 09 '15 at 12:34

1 Answers1

0

Whit Chrome try to use css function zoom instead of transform scale. Reminds that the zoom function have a different positioning behavior

UncleBen
  • 1
  • 1