CSS zoom non funziona per un <img> in <a>, in iOS 8 Mobile Safari

Utilizzando zoom: 0.5;, immagine viene resa in corpo 0,5x quando non all'interno <a> tag, ma in termini di dimensioni 1x quando all'interno <a> tag.CSS zoom non funziona per un <img> in <a>, in iOS 8 Mobile Safari

Si è verificato con iOS 8 GM (simulatore iPhone 5 di Xcode 6 GM e iPad mini).

Questo non si è verificato con iOS 7.1.2 (iPhone 5) e iOS 7.0 (simulatore iPhone 5 di Xcode 6 GM).

Ecco un esempio: 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 è funzionante su iOS 8, ma io don' desidera utilizzare questo, perché anche se l'immagine è resa in formato 0,5x, lo spazio consumato dal Il tag <img> è di dimensione 1x.

Eventuali soluzioni alternative?

fonte

2014-09-13 Kenji

Ciò si verifica anche in Safari 8 su OS X Yosemite Beta. – quantumwannabe

questo è un nuovo bug di iOS. Spero di essere risolto al più presto, perché la modifica di tutti gli zeri zoomati ad altri tag non è accettabile ... –

Questo bug è stato corretto in iOS 8.3. –

Anche se non è l'ideale, questo è come ho affrontato il problema:

Sostituire ancore con un altro elemento (div o calibrazione a seconda di blocco/linea)
Dare ad ogni elemento di un nome di classe condiviso
o lasciare il href, o, aggiungere una proprietà data-href con l'href
su un alto livello, hanno un legano listener di eventi per tutti gli elementi con il nome della classe
evento ascoltatore legge href e poi trigger di routing/controllore logico appropriato per il quadro

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

    }); 

});

Speriamo che il problema in Safari è fissato in un futuro aggiornamento iOS.

fonte

2014-09-18 19:59:36

Grazie per una soluzione! – Kenji

Ho lavorato con un metodo diverso, che poteva essere usato solo con un framework webapp (posterò più tardi). La tua soluzione sembra funzionare, per qualsiasi ambiente :) – Kenji

Ho trovato una soluzione alternativa, ma può essere utilizzata solo con un framework webapp. Stavo usando CakePHP e stavo usando un metodo di supporto per generare tutti i tag img, quindi ho eseguito l'override di quel metodo in modo che emettesse gli attributi width e height, e smetti di usare lo zoom css.

Ho utilizzato getimagesize di GD per ottenere la larghezza e l'altezza. http://php.net/manual/ja/function.getimagesize.php

fonte

2014-09-22 05:28:49 Kenji

Trasformo queste immagini con scala.

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

questo funziona anche per ios ma devi riposizionare le tue foto dopo quello!

fonte

2014-10-16 10:06:12 rahcon

Per impostazione predefinita -webkit-transform su Safari e MobileSafari ha un "centro centro" di origine, il che significa che il contenitore padre avrà le stesse dimensioni se non ridimensionato.

Regolare questo impostando questo a “in alto a sinistra” utilizzando:

-webkit-transform-origin 0 0;

soluzione Whole sarebbe allora (con il supporto di IE9 +, FF, Chrome e 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;

fonte

2014-12-17 14:04:14 Roy

Funziona come un fascino! –

Ciò manterrebbe comunque lo spazio, vero? Quindi ci sarebbe di nuovo un buco sotto di essa della stessa altezza - come si aggira questo problema? –

Piuttosto di cambiare il tuo markup, puoi semplicemente ridimensionare le immagini usando un po 'di javascript.

Ecco un frammento di lavoro (utilizzando jQuery) di quello che sto attualmente in uso sul mio blog 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(); 
}

Utilizzando questa soluzione, non c'è bisogno di cambiare il vostro CSS, i tag di ancoraggio, né alcuna delle il tuo markup, basta aggiungere un po 'di javascript per ridimensionare le immagini.

Sto utilizzando le query multimediali CSS per impostare lo zoom CSS su 1 su schermi di grandi dimensioni e su 0,5 su schermi più piccoli. Anche se il valore dello zoom non funziona più, riporta ancora come 0.5 in jQuery. Poiché si tratta di un design reattivo, ho aggiunto un gestore sull'evento di ridimensionamento della finestra per ridimensionare automaticamente l'immagine su/giù ogni volta che il valore dello zoom viene modificato (rispondendo alle query multimediali CSS).

Se non si utilizzano le query multimediali per modificare in modo reattivo il valore dello zoom CSS, allora la quantità di javascript necessaria (senza il gestore) è molto inferiore.

fonte

2014-12-21 12:23:03

CSS zoom non funziona per un <img> in <a>, in iOS 8 Mobile Safari

risposta

Problemi correlati