Zooming in Safari using a PDF
Zooming an image is serious business. As I mentioned in a previous post, scaling an image for a mobile device it's not as easy as it seems. Sure, the process of scaling is as simple as saying
transform: scale3d(2, 2, 1);
and bam! you have a nice, smooth, hardware-accelerated scaled image. The downside is that during the scaling process, the image gets treated as a texture and it gets a little blurry, making any text on it harder to read. There are ways of fixing this, but in the end if you want to show the user a large image with text (like a magazine/catalog page), you're going to have some troubles with the readability.
Using a PDF instead of a simple image fixes the text problem. However, there is a catch. Doing this
<img src="mypdf.pdf" style="transform: scale3d(2, 2, 1);">
gets you a scaled result just as blurry as the regular image. Why? Because the PDF is rendered for the regular image size and transformed into an image and only then scaled. It doesn't redraw the image after the zooming so you're stuck with the same problem.
What we did was to change the image size instead of scaling it. Let's say we have a 1000x1000 image containing mostly text and an image.pdf file. In order to get a nice, clear text on it, use the following trick:
<img src="mypdf.pdf" width="2000px" height="2000px">
By doing this, you actually draw the PDF at a double scale and its internal text scaling mechanism kicks in and draws it correctly. There are two major downsides to this technique though:
- You don't get to have the nice zoom animation anymore that you could have gotten with a CSS transformation and a transition-duration
- Dragging that image around is a real pain. In our case, it wasn't smooth on the iPad3, not to mention the older versions...
However, fixing both these issues is actually simple:
- you take the image
- you scale it using the css transform
- you place a div with the pdf version, with a scale * width / height, exactly over the original image
The pdf version will load really nicely and update the blurry image underneath it with a clearer one.
The same thing can be done for dragging:
- you hide the pdf version
- you move around the css-scaled image
- when the drag ends you apply the same translations to the pdf version and you show it again
In the end, everything worked really well for us