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

您可能感兴趣的

A Beginner’s Guide to CSS Front-End Frameworks CSS frameworks provide a basic structure for designing consistent solutions to tackle common issues across front-end web development. They provide gen...
Display input file as background? I'm wondering how is it possible to display a file input within the HTML document. Lets me to pick an image file, but I'm really not sure ...
Using CSS Grid: Supporting Browsers Without Grid Using CSS Grid: Supporting Browsers Without Grid ByRachel Andrew November 16th, 2017 Browsers CSS CSS Grid When using any new...
Introducing Salsa: A tool for exporting iOS compon... What is Salsa? Salsa is an open source library that renders iOS views and exports them into a Sketch file. We built Salsa to help bridge the gap bet...
Collective #321 Collective #321 June 7, 2017 View All SVGI * JSC loves ES6 * A day without Javascript * Fun with Viewport Units * How the minmax...