Differenza sul rendering delle immagini su diverse versioni di Android

Question

Sto cercando di creare una galleria di immagini usando Sencha Touch. Creo un oggetto contenitore con il layout di hbox e la larghezza uguale a window.innerWidth. Poi, aggiungo tre contenitori al suo interno. Ognuno utilizza il layout vbox e con larghezza uguale a window.innerWidth/3.

Aggiungo le immagini in esso con larghezza pari alla larghezza e all'altezza della colonna impostata su CSS su "auto".

Questo è il mio codice:

Ext.define('Oasis.view.ImgTest',{ 
extend: 'Ext.Container', 
xtype:'mosaic', 
config:{ 
    cls: 'gallery', 
    layout: { 
     type: 'hbox', // This is a column-based mosaic 
     pack: 'center', 
     align: 'start' 
    }, 
    columnWidth: -1,// 
    numCols: 3, // Number of columns 
    lastColumnUsed: -1, // Last column where a image were added. -1 for none. 
    autoInstanceColumns: false, // If true, instantiate each column on initialize method 
    items:[], 
    scrollable: { 
     direction: 'vertical', 
     directionLock : true 
    } 
}, 
initialize: function(){ 
    var me = this; 

    me.setColumnWidth(window.innerWidth/me.getNumCols()); 

    Ext.Viewport.on('orientationchange', function(){ 
     // Updates columns widths on screen orientation changes 
     me.setColumnWidth(window.innerWidth/me.getNumCols()); 
     for(var c = 0; c < me.getNumCols();c++){ 
      // Column 
      var column = me.getAt(c); 
      for(var i = 0; i < column.getItems().getCount();i++){ 
       // Items per column 
       var element = column.getAt(i); 
       element.setWidth(me.getColumnWidth()); 
      } 
     } 
    }, this, {buffer: 50 }); 

    // Creates all columns and add to the mosaic 
    if(me.getAutoInstanceColumns()) 
     for(var i = 0; i < me.getNumCols();i++){ 
      me.add({ 
       xtype:'container', 
       id: 'col-'+i, 
       cls: 'gallery', 
       layout: 'vbox', 
       flex:1 
      }); 
     } 


    // Add images 
    me.insert(Ext.create('Ext.Img',{ 
      src:'resources/images/0228_FEA_Pet_dog_WCGHS_cutt.jpg', 
      cls: 'mosaicitem', 
      mode: 'element' 
     }));me.insert(Ext.create('Ext.Img',{ 
      src:'resources/images/027c076a1c-1152x864.jpg', 
      cls: 'mosaicitem', 
      mode: 'element' 
     }));me.insert(Ext.create('Ext.Img',{ 
      src:'resources/images/0913_LIF_PET_DOG_CUTTY_WCG.jpg', 
      cls: 'mosaicitem', 
      mode: 'element' 
     })); 
}, 
__get_next_column_index: function(){ 
    var me = this; 
    var column = 0; 

    // If some column was used in the last iteraction (if there was one), 
    // calculates the next column that should be used. Else, use column 0. 
    if(me.getLastColumnUsed() >= 0){ 
     column = (me.getLastColumnUsed() + 1) % me.getNumCols(); 
    } 


    return column 
}, 
insert: function(element){ 
    var me = this; 

    // Se as colunas não forem instanciadas logo na initialização da classe, instancia uma a uma até que todas estejam instanciadas. 
    if(!me.getAutoInstanceColumns() && me.getItems().getCount() < me.getNumCols()){ 
     var column = me.getItems().getCount(); 
     target_column = me.add({ 
       xtype:'container', 
       id: 'col-'+column, 
       cls: 'column', 
       flex:1 
      }); 
    }else{ 
     var column = me.__get_next_column_index(); 
     var target_column = me.getAt(column); 
    } 

    // Set element width 
    element.setWidth(me.getColumnWidth()); 
    target_column.add(element); 
    me.setLastColumnUsed(column); 
}, 

})

Questo è il mio CSS:

.gallery { 
line-height: 0; 
-webkit-column-gap: 0px; 
margin: 2px 2px 2px 2px; 
height: 100%; 
} 
.mosaicitem { 
height:auto !important; 
border: 2px solid rgba(0,0,0,0.4); 
border-radius: 5px; 
padding: 2px; 
background: rgba(0,0,0,0.5); 
position: relative; 
-webkit-animation: fadein 1s, translateZ 0.6s; /* Safari and Chrome */ 
-webkit-animation-delay: 0s, 0s; 
    -moz-animation: fadein 1s, translateZ 0.6s; /* Firefox */ 
    -moz-animation-delay: 0s, 0s; 
    -ms-animation: fadein 1s, translateZ 0.6s; /* Internet Explorer */ 
    -ms-animation-delay: 0s, 0s; 
    -o-animation: fadein 1s, translateZ 0.6s; /* Opera */ 
    -o-animation-delay: 0s, 0s; 
     animation: fadein 1s, translateZ 0.6s; 
     animation-delay: 0s, 0s; 
} 

/* Animations */ 
@keyframes fadein { 
from { opacity: 0 ; } 
to { opacity: 1 ; } 
} 
@keyframes translateZ { 
from { top : 100px ; } 
to { top: 0px ; } 
} 

/* Firefox */ 
@-moz-keyframes fadein { 
from { opacity: 0 ; } 
to { opacity: 1 ; } 
} 
@-moz-keyframes translateZ { 
from { top : 100px ; } 
to { top: 0px ; } 
} 

/* Safari and Chrome */ 
@-webkit-keyframes fadein { 
from { opacity: 0 ; } 
to { opacity: 1 ; } 
} 

@-webkit-keyframes translateZ { 
from { top : 100px ; } 
to { top: 0px ; } 
} 

/* Internet Explorer */ 
@-ms-keyframes fadein { 
from { opacity: 0 ; } 
to { opacity: 1 ; } 
}​ 
@-ms-keyframes translateZ { 
from { top : 100px ; } 
to { top: 0px ; } 
} 

/* Opera */ 
@-o-keyframes fadein { 
from { opacity: 0 ; } 
to { opacity: 1 ; } 
}​ 
@-o-keyframes translateZ { 
from { top : 100px ; } 
to { top: 0px ; } 
} 

su dispositivi con Android 4.4.2 funziona perfettamente. Tuttavia, su Android 4.2.2 sembra che l'altezza sia impostata al 100% o qualcosa del genere.

Questo è un confronto su emulatore Android.

Cosa sta succedendo qui?

Answer 1

La classe mosaicitem nel CSS imposta l'attributo height su auto. Ciò significa che lasci che il browser rezizzi l'immagine. Ovviamente, avrai risultati diversi su browser diversi. Non so esattamente come reagiscono i due browser al tuo ambiente, ma può solo venire da questo.

Tratto da Doc di Sencha sulla proprietà Ext.Imageheight:

Per impostazione predefinita, se questo non è impostata in modo esplicito, elemento di questa componente sarà semplicemente avere una propria dimensione naturale.

Quindi credo che questa linea stia imponendo un'altezza con il tuo! Tag importante, e sovrascrive l'altezza automatica di sencha che dovrebbe essere la dimensione naturale dell'immagine.

In breve, provare a rimuovere questa linea.