CSS zoom nie działa na <img> w <a> w iOS 8 Mobile Safari

Korzystanie zoom: 0.5;, obraz zostanie wykonane w rozmiarze 0,5x gdy nie wewnątrz <a> tag, ale w rozmiarze 1x gdy wewnątrz <a> tagu.CSS zoom nie działa na <img> w <a> w iOS 8 Mobile Safari

Wystąpiło to w systemie iOS 8 GM (symulator iPhone'a 5 Xcode 6 GM i iPad mini).

Nie wystąpiło to w przypadku iOS 7.1.2 (iPhone 5) i iOS 7.0 (iPhone 5 simulator Xcode 6 GM).

Oto przykład: https://dl.dropboxusercontent.com/u/379843/ios8csszoom/test.html

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

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

     <hr> 

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

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

-webkit-transform działa na iOS 8, ale don”chcemy to wykorzystać, bo chociaż obraz jest renderowany w rozmiarze 0,5x, przestrzeń zużywanej przez Tag <img> jest 1x rozmiar.

Jakiekolwiek obejścia?

Źródło

2014-09-13 Kenji

Dotyczy to również przeglądarki Safari 8 w systemie OS X Yosemite Beta. – quantumwannabe

który jest nowym błędem iOS. Mam nadzieję, że zostanie naprawiony JAK NAJSZYBCIEJ, ponieważ zmiana wszystkich powiększonych kotwic na inny znacznik jest niedopuszczalna ... –

Ten błąd został naprawiony w iOS 8.3. –

Chociaż nie jest idealny, to jak mam poradził sobie z problemem:

Zamień kotew z innego elementu (div lub rozpiętość w zależności od bloku/inline)
dać każdemu elementowi wspólną nazwę klasy
albo zostawić href lub dodaj właściwość data-href z href
na wysokim poziomie, mają powiązania nasłuchiwania zdarzeń do wszystkich elementów z nazwą klasy
zdarzenia, a następnie odczytuje href wyzwala routing/sterownik logiczny właściwe dla używanego ramach

Przykład: 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); 

    }); 

});

Mam nadzieję, że problem w Safari jest ustalona w przyszłej aktualizacji iOS.

Źródło

2014-09-18 19:59:36

Dzięki za rozwiązanie! – Kenji

Pracowałem przy użyciu innej metody, która może być używana tylko w środowisku Webapp (będę pisać później). Twoje rozwiązanie wydaje się działać, dla każdego środowiska :) – Kenji

Udało mi się obejść, ale można z niego korzystać tylko w środowisku przeglądarki internetowej. Używałem CakePHP i używałem metody pomocniczej do wyprowadzenia wszystkich znaczników img, więc nadpisałem tę metodę, aby wyprowadzić atrybuty szerokości i wysokości, i zakończyć pracę przy użyciu zoomu css.

Użyłem getimagesize z GD, aby uzyskać szerokość i wysokość. http://php.net/manual/ja/function.getimagesize.php

Źródło

2014-09-22 05:28:49 Kenji

Przetwarzam te zdjęcia ze skalą.

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

to również działa dla ios, ale musisz zmienić swoje zdjęcia po tym!

Źródło

2014-10-16 10:06:12 rahcon

Domyślnie -webkit-transform w Safari i MobileSafari ma początek "centrum centrum", co oznacza, że kontener nadrzędny będzie miał taki sam rozmiar, jakby nie był skalowany.

Dostosowanie to przez ustawienie na „górnej lewej” z:

-webkit-transform-origin 0 0;

całego rozwiązania będzie wówczas (z IE9 +, FF, chrom i Safari/MobileSafari nośnej):

 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;

Źródło

2014-12-17 14:04:14 Roy

Działa jak urok! –

To nadal zachowałoby przestrzeń, prawda? Więc znowu będzie pod nią luka o tej samej wysokości - jak sobie poradzisz z tym problemem? –

Raczej zamiast zmieniać znaczniki, możesz zmienić rozmiar obrazów za pomocą odrobiny javascript.

Oto fragment pracy (przy użyciu jQuery), co obecnie używam na moim blogu 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(); 
}

Korzystanie z tego rozwiązania, nie ma potrzeby, aby zmienić CSS, tagów kotwicy, ani żaden z twój znacznik, dodaj trochę javascriptu, aby zmienić rozmiar obrazów.

Używam zapytań o media CSS, aby ustawić zoom CSS na 1 na dużych ekranach i na 0.5 na mniejszych ekranach. Mimo że wartość zoomu już nie działa, w jQuery nadal raportuje jako 0.5. Ponieważ jest to responsywny projekt, dodałem obsługę zdarzenia zmiany rozmiaru okna, aby automatycznie zmienić rozmiar obrazu w górę/w dół za każdym razem, gdy wartość zoomu zostanie zmieniona (w odpowiedzi na zapytania o media CSS).

Jeśli jednak nie używasz zapytań o media, aby szybko zmienić wartość powiększenia CSS, to ilość potrzebnego javascriptu (bez obsługi) jest znacznie mniejsza.

Źródło

2014-12-21 12:23:03

CSS zoom nie działa na <img> w <a> w iOS 8 Mobile Safari

Odpowiedz

Powiązane problemy