CSS缩放在iOS 8移动Safari中无法对<a>标签中的<img>元素生效。

Question

CSS缩放在iOS 8移动Safari中无法对<a>标签中的<img>元素生效。

7

使用 zoom: 0.5;，如果不在 <a> 标签内，则图像以0.5倍大小呈现，但在 <a> 标签内则以1倍大小呈现。这在iOS 8 GM（Xcode 6 GM的iPhone 5模拟器和iPad mini）中发生。

而在iOS 7.1.2（iPhone 5）和iOS 7.0（Xcode 6 GM的iPhone 5模拟器）中未发生此问题。

以下是一个示例：https://dl.dropboxusercontent.com/u/379843/ios8csszoom/test.html

<!DOCTYPE html>
<html>
    <body>
        <img src="star-on@2x.png" style="border: 1px solid blue; zoom: 0.5;"/>

        <a href="#">
            <img src="star-on@2x.png" style="border: 1px solid blue; zoom: 0.5;"/>
        </a>

        <hr>

        <img src="star-on@2x.png" style="border: 1px solid blue; -webkit-transform: scale(0.5);"/>

        <a href="#">
            <img src="star-on@2x.png" style="border: 1px solid blue; -webkit-transform: scale(0.5);"/>
        </a>
    </body>
</html>

-webkit-transform在iOS 8上运行，但我不想使用它，因为即使图像以0.5x大小呈现，<img>标签占用的空间仍然是1x大小。

有什么解决方法吗？

- Kenji

这也发生在OS X Yosemite Beta上的Safari 8中。 - quw

那是新的iOS漏洞。希望尽快修复，因为更改所有缩放锚点到其他标签是不可接受的... - Mladen Janjetovic

1

这个漏洞现在已经在iOS 8.3中修复了。 - DM.

5个回答

3

默认情况下，Safari和MobileSafari上的-webkit-transform具有一个原点“center center”，这意味着父容器的大小将与未缩放时相同。通过使用以下设置将其调整为“top left”：

-webkit-transform-origin 0 0;

整个解决方案将是以下内容（支持IE9+，FF，Chrome和Safari / MobileSafari）：

        transform: scale(0.5);
    -ms-transform: scale(0.5);
   -mos-transform: scale(0.5);
-webkit-transform: scale(0.5);
        transform-origin: 0 0;
    -ms-transform-origin: 0 0;
   -mos-transform-origin: 0 0;
-webkit-transform-origin: 0 0;

- Roy

这样做仍然会保留空间，不是吗？因此，在其下方将再次出现相同高度的间隙 - 您如何解决这个问题？ - mike nelson

2

我使用缩放来转换这些图片。

-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);

这对于iOS也适用，但是您需要在此之后重新调整您的图片位置！

- rahcon

0

不必更改您的标记，您只需使用一点点JavaScript调整图像大小。

这是我目前在我的WordPress博客上使用的一个有效片段（使用jQuery）：

var dmblog  = {

    // [TRUNCATED]

    // ! dmblog.imgZoomResize
    imgZoomResize        : function(element) {
        var zoom = element.css('zoom');
        element.width(element[0].naturalWidth*zoom);
        element.height(element[0].naturalHeight*zoom);
    },

    // ! dmblog.retinaImagesResize
    retinaImagesResize  : function() {
        $('.post .entry-content img, .comment .comment-content img').each(function(){
            dmblog.imgZoomResize($(this));
            // set a handler on the resize event to resize the retina images
            var $w          = $(window),
                namespace   = $(this)[0].id.replace('#','.'),
                element     = $(this),
                handler     = function() {
                    dmblog.imgZoomResize(element);
                };
            $w.bind('resize'+namespace, handler);
        });
    }
};

// [TRUNCATED]

// ! for single posts, load some scripts
if ($('body').hasClass('single'))
{
    // [TRUNCATED]

    // resize retina images
    dmblog.retinaImagesResize();
}

使用此解决方法，无需更改您的CSS、锚标签或任何标记，只需添加一点JavaScript来调整图像大小。

我使用CSS媒体查询在大屏幕上将CSS缩放设置为1，在较小的屏幕上将其设置为0.5。即使缩放值不再起作用，它仍然在jQuery中报告为0.5。由于它是响应式设计，我在窗口调整大小事件上添加了一个处理程序，以便在缩放值更改时（响应CSS媒体查询）自动调整图像的大小。

如果您没有使用媒体查询来响应性地更改CSS缩放值，则需要的JavaScript量（不包括处理程序）要少得多。

- DM.

0

我想出了一个解决方法，但只能用在Web应用程序框架中。我正在使用CakePHP，并且正在使用一个helper方法来输出所有的img标签，因此我覆盖了该方法，以便它能够输出width和height属性，并停止使用css缩放。

我使用GD的getimagesize来获取宽度和高度。 http://php.net/manual/ja/function.getimagesize.php

- Kenji

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dave Vanderburg · Accepted Answer

虽非理想，这是我解决问题的方式：

使用另一个元素（div或span，取决于块/内联）替换锚点
为每个元素分配共享类名
保留href属性或添加一个data-href属性与href属性相同
在高层面上，有一个事件监听器绑定到所有具有相同类名的元素
事件监听器读取href并触发适合您框架的路由/控制器逻辑

例子：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);

    });

});

希望在未来的iOS更新中，Safari的问题能够得到解决。