Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference on image rendering over different android version

í'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. enter image description here

What's happening here?

like image 314
Pedro Alves Avatar asked Jun 05 '14 18:06

Pedro Alves


1 Answers

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.

like image 99
Saffron Avatar answered Oct 11 '22 08:10

Saffron