CSS zoom does not work for a & lt; Img & gt; In & lt; A & gt; in iOS 8 …

综合技术 2018-05-18

Using zoom: 0.5;
, image gets rendered in 0.5x size when not inside
tag, but in 1x size when inside

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


    
        <img src="[email protected]" style="border: 1px solid blue; zoom: 0.5;"/>

        
            <img src="[email protected]" style="border: 1px solid blue; zoom: 0.5;"/>
        

        
<img src="[email protected]" style="border: 1px solid blue; -webkit-transform: scale(0.5);"/> <img src="[email protected]" style="border: 1px solid blue; -webkit-transform: scale(0.5);"/>

-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
tag is 1x size.

Any workarounds?

Although not ideal, this is how I've coped with the problem:

  • Replace anchors with another element (div or span depending on block/inline)
  • Give each element a shared class name
  • Either leave the href, or, add a data-href property with the href
  • On a high level, have an event listener bind to all elements with your class name
  • Event listener reads href and then triggers routing/controller logic appropriate for your framework

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.

Hello, buddy!

责编内容by:Hello, buddy! (源链)。感谢您的支持!

您可能感兴趣的

iCloud Drive can strip metadata from documents When you copy a file to iCloud Drive, then copy from there onto another Mac, the contents of the fil...
The background image in the view controller causes... I tried 2 different methods of creating a background image for a view controller. I have researche...
PHP中array_merge函数与array+array的区别 在 PHP中可以使用array_merge函数和两个数组相加array+array的方式进行数组合并,但两者效果并不相同,下面为大家介绍两者具体的使用区别. 区别如下: 1、 ...
Attempt to load the view of a view controller whil... I have code that creates a UISearchController' in my UIVIew's viewDidLoad`. self.resultSearc...
LineageM Collection – 篩選卡片 Lineage M 這個遊戲在抽完卡片以後,卡片會進入收藏夾裡面,收藏到特定的卡組後會有一些 buff. 所以呢,開卡包的角子機效果做完以後,接著想做一個卡片的瀏覽工具。 Lin...