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!阅读原文】。感谢您的支持!

您可能感兴趣的

How can I turn a bullet image into a link? CSS .rss {margin: 5px 5px 0 5px; padding: 0; width: 100% } .rss li {display: inline-block; ...
Hide first li in ul with CSS I have a navigation menu that I'd like to hide the first item in it. e.g. Home About Item...
UILabel垂直方向布局调整——实现居上居下效果... iOS UIKit框架默认只能通过UILable的textAlignment属性调整其水平方向上的布局,设置文字水平居左、居中和居右。不能对文字垂直方向上的布局做出直接调整,但是我们通过重写UILabel的textRectForBounds...
CSS设置居中的方案总结-超全 前几天面试一家公司,被问到垂直居中的方法,我只答出了margin、table-cell、flex三种。回来之后觉得特别惭愧,于是整理了一下居中的方案做个记录,希望对大家也有帮助。 如果哪里写的不对,欢迎指正,非常感谢。 块级...
Objectable C Mutable Array I am having problems working with an NSMutableArray in my program. There is an array contained within my view controll...