CSS Zoom funktioniert nicht für ein <img> in <a>, in iOS 8 Mobile Safari

zoom: 0.5; verwendet, wird Bild in 0.5x Größe wiedergegeben, wenn sie nicht innerhalb <a> Tag, aber in 1x Größe, wenn innerhalb <a> Tages.CSS Zoom funktioniert nicht für ein <img> in <a>, in iOS 8 Mobile Safari

Dies geschah mit iOS 8 GM (iPhone 5 Simulator von Xcode 6 GM und iPad mini).

Dies trat nicht mit iOS 7.1.2 (iPhone 5) und iOS 7.0 (iPhone 5-Simulator von Xcode 6 GM) auf. Hier

ein Beispiel: 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 funktioniert auf iOS 8, aber ich don‘wollen, dies nutzen, denn auch wenn das Bild in 0.5x Größe gerendert wird, den Raum durch die verbrauchte <img> Etikett ist 1x Größe.

Problemumgehungen?

Quelle

2014-09-13 Kenji

Dies tritt auch in Safari 8 unter OS X Yosemite Beta auf. – quantumwannabe

das ist neuer iOS Bug. Ich hoffe, dass es so schnell wie möglich repariert werden kann, da das Ändern aller gezoomten Anker auf ein anderes Tag inakzeptabel ist ... –

Dieser Fehler ist jetzt in iOS 8.3 behoben. –

Obwohl nicht ideal, das ist, wie ich mit dem Problem fertig geworden bin:

mit einem anderen Element

ersetzen Anker (div oder Spanne auf Block/Inline-abhängig)
jedes Element Geben Sie einen gemeinsamen Klassennamen
Entweder die href verlassen, oder fügen Sie eine Daten-href-Eigenschaft mit dem href
auf hohem Niveau, haben einen Ereignis-Listener binden an alle Elemente mit dem Klassennamen
Ereignis-Listener liest href und dann

Beispiel: 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); 

    }); 

});

Hoffentlich wird das Problem in Safari wird in einem zukünftigen iOS-Update behoben.

Quelle

2014-09-18 19:59:36

Danke für eine Lösung! – Kenji

Ich arbeitete mit einer anderen Methode, die nur mit einem Webapp-Framework verwendet werden konnte (ich werde später veröffentlichen). Ihre Lösung scheint zu funktionieren, für jede Umgebung :) – Kenji

Ich habe einen Workaround gefunden, kann aber nur mit einem Webapp-Framework verwendet werden. Ich verwendete CakePHP und verwendete eine Hilfsmethode, um alle IMG-Tags auszugeben. Daher übersteuerte ich diese Methode, sodass die Attribute width und height ausgegeben wurden, und beendete die Verwendung des CSS-Zooms.

Ich habe getimagesize von GD verwendet, um die Breite und Höhe zu erhalten. http://php.net/manual/ja/function.getimagesize.php

Quelle

2014-09-22 05:28:49 Kenji

Ich wandle diese Bilder mit Maßstab.

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

dies funktioniert auch für ios, aber Sie müssen Ihre Bilder danach neu positionieren!

Quelle

2014-10-16 10:06:12 rahcon

Standardmäßig hat -webkit-transform auf Safari und MobileSafari einen Ursprung "center center", was bedeutet, dass der übergeordnete Container die gleiche Größe hat, als wäre er nicht skaliert.

diese anpassen dies auf „oben links“, indem Sie mit:

-webkit-transform-origin 0 0;

Ganze Lösung wäre dann (mit IE9 +, FF, Chrome und Safari/Mobile Unterstützung):

 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;

Quelle

2014-12-17 14:04:14 Roy

Funktioniert wie ein Charme! –

Dies würde immer noch den Platz behalten, nicht wahr? So würde es wieder eine Lücke von derselben Höhe geben - wie kommst du um dieses Problem herum? –

Rather Wenn Sie Ihr Markup ändern, können Sie die Größe der Bilder einfach mit ein wenig Javascript ändern.

Hier ist ein Arbeits Schnipsel (mit jQuery) von dem, was ich gerade auf meinem Wordpress-Blog mit:

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(); 
}

Mit diesem Problem zu umgehen, gibt es keine Notwendigkeit, Ihre CSS zu ändern, um die Anker-Tags, noch irgendein Ihr Markup, fügen Sie einfach ein wenig Javascript hinzu, um die Größe der Bilder zu ändern.

Ich verwende CSS-Medienabfragen, um den CSS-Zoom auf großen Bildschirmen auf 1 und auf kleineren Bildschirmen auf 0,5 zu setzen. Auch wenn der Zoom-Wert nicht mehr funktioniert, wird in jQuery immer noch als 0,5 angezeigt. Da es sich um ein responsives Design handelt, habe ich einen Handler für das Fenster resize-Ereignis hinzugefügt, um das Bild automatisch nach oben/unten zu skalieren, wenn der Zoom-Wert geändert wird (reagiert auf CSS-Medienabfragen).

Wenn Sie keine Medienabfragen verwenden, um den CSS-Zoomwert zu ändern, ist die benötigte Menge an JavaScript (ohne den Handler) viel geringer.

Quelle

2014-12-21 12:23:03

CSS Zoom funktioniert nicht für ein <img> in <a>, in iOS 8 Mobile Safari

Antwort

Verwandte Themen