Menu
Using zoom: 0.5;, image gets rendered in 0.5x size when not inside <a> tag, but in 1x size when inside <a> tag.
This occurred with iOS 8 GM (iPhone 5 simulator of Xcode 6 GM, and iPad mini).
This did not occur with iOS 7.1.2 (iPhone 5) and iOS 7.0 (iPhone 5 simulator of Xcode 6 GM).
Here is an example : https://dl.dropboxusercontent.com/u/379843/ios8csszoom/test.html
<!DOCTYPE html>
<html>
<body>
<img src="[email protected]" style="border: 1px solid blue; zoom: 0.5;"/>
<a href="#">
<img src="[email protected]" style="border: 1px solid blue; zoom: 0.5;"/>
</a>
<hr>
<img src="[email protected]" style="border: 1px solid blue; -webkit-transform: scale(0.5);"/>
<a href="#">
<img src="[email protected]" style="border: 1px solid blue; -webkit-transform: scale(0.5);"/>
</a>
</body>
</html>
-webkit-transform is functioning on iOS 8, but I don' want to use this, because even though the image is rendered in 0.5x size, the space consumed by the <img> tag is 1x size.
Any workarounds?
639
In many apps, you can zoom in or out on specific items. For example, you can double-tap or pinch to look closer in Photos or expand webpage columns in Safari. You can also use the Zoom feature to magnify the screen no matter what you're doing.
The non-standard zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.
Although not ideal, this is how I've coped with the problem:
Example: http://jsfiddle.net/z5crh05a/
$(".fauxLink").on("click", function(e) {
var href = $(e.currentTarget).attr("href");
e.preventDefault();
e.stopPropagation();
// navigation logic here
alert("Navigate to: "+href);
});
});
Hopefully the issue in Safari is fixed in a future iOS update.
182
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
