Difference on image rendering over different android version
android, css, html, image, sencha-touch-2
Solution
Your `mosaicitem` class in your CSS sets the `height` attribute to be `auto`. That means you let the browser rezise the image. Obviously, you will have different results on different browser. I don't know exactly how the two browsers react to your setting, but it can only come from this.
Taken from Sencha's Doc about the `Ext.Image` `height` property:
By default, if this is not explicitly set, this Component's element will simply have its own natural size.
So I believe that this line is imposing a height with your !important tag, and overrides sencha's automatic height which should be the image's natural size.
In short, try removing this line.
Problem
í'm trying to build a image gallery using Sencha Touch. I create a container object with hbox layout and width equal to window.innerWidth. Then, i add three containers inside it. Each one using vbox layout and with width equal to window.innerWidth / 3. I add images in it with width equal to the column width and height setted on CSS to 'auto'. This is my code: ``` 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); }, ``` }) This is my 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 ; } } ``` On devices running android 4.4.2 it works perfectly. However, on android 4.2.2 it look as if the height was set to 100% or something like that. This is a comparison on android emulator. What's happening here?