CSS zoom не работает для in, в iOS 8 Mobile Safari

используя zoom: 0.5;, изображение отображается в размере 0,5 x, когда не внутри <a> тег, но в размере 1x, когда внутри <a> тег.

это произошло с iOS 8 GM (iPhone 5 симулятор Xcode 6 GM и iPad mini).

этого не произошло с iOS 7.1.2 (iPhone 5) и iOS 7.0 (iPhone 5 симулятор Xcode 6 GM).

вот пример: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 is работает на iOS 8, но я не хочу использовать это, потому что, хотя изображение отображается в размере 0.5 x, пространство, потребляемое <img> бирка размер 1x.

какие-нибудь обходные пути?

6
css ios8 mobile mobile-safari zoom

5 ответов

хотя и не идеально, вот как я справился с проблемой:

  • замените анкеры другим элементом (div или span в зависимости от Блока/inline)
  • дайте каждому элементу общее имя класса
  • либо оставьте 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);

    });

});

надеюсь, проблема в Safari исправлена в будущем обновлении iOS.

3

по умолчанию-webkit-transform на Safari и MobileSafari имеет исходный "центр центра", что означает, что родительский контейнер будет такого же размера, как если бы он не был масштабирован.

настройки этого параметра на "верхнем левом" через:

-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;
3

я преобразую эти изображения в масштабе.

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

это также работает для ios, но вы должны переместить свои фотографии после этого!

2

Я понял обходной путь, но может использоваться только с платформой webapp. Я использовал CakePHP и использовал вспомогательный метод для вывода всех тегов img, поэтому я переопределил этот метод, чтобы он выводил атрибуты width и height, и прекратил использовать CSS zoom.

Я использовал getimagesize GD, чтобы получить ширину и высоту. http://php.net/manual/ja/function.getimagesize.php

0

вместо того, чтобы изменять разметку, вы можете просто изменить размер изображений, используя немного javascript.

вот рабочий фрагмент (используя jQuery) того, что я сейчас использую в своем блоге WordPress:

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 на небольших экранах. Даже если значение масштаба больше не работает, он по-прежнему сообщает, как 0.5 в jQuery. Поскольку это адаптивный дизайн, я добавил обработчик события изменения размера окна, чтобы автоматически изменять размер изображения вверх / вниз при изменении значения масштабирования (отвечая на запросы css media).

Если вы не используете медиа-запросы для ответственного изменения значения масштабирования CSS, то количество javascript, которое вам понадобится (без обработчика), намного меньше.

0