I am getting two different looks from my HTML/CSS when running from my raw source vs after building for production (sencha app build production). I am using Cmd v3.0.0.250, Sencha Touch 2.1 with sencha-SlideNavigation and mitchellsimoens/Ext.ux.touch.grid. I've carefully examined the HTML and CSS - they seem to be close, but not the same - note how the .touchgridpanel is after other CSS after the build (from Chrome, selected the div with the number 457 in it and copied the style info here)... I am testing on Chrome from my Windows 7 machine which is also serving the content via apache.

In Developer Mode After building (prod mode)
element.style {
  • font-size: 0.7em;
  • padding-left: 0.8em;
  • width: 15%;
}

Matched CSS Rules


.touchgridpanel .x-grid-cell:first-child {
  • border-left: none;
}



.touchgridpanel .x-grid-cell {
  • display: inline-block;
  • overflow: hidden;
  • text-overflow: ellipsis;
  • white-space: nowrap;
  • vertical-align: middle;
  • line-height: 2em;
  • font-size: 1em;
  • font-weight: bold;
  • border-left: 1px solid #ccc;
}



body, div, dl, dt, dd, ul,ol, li, h1, h2, h3, h4, h5, h6, pre,code, form, fieldset, legend, input,textarea, p, blockquote, th, td {
  • margin: 0;
  • padding: 0;
}



*, ::after, ::before {
  • -webkit-box-sizing: border-box;
  • box-sizing: border-box;
  • -webkit-tap-highlight-color:rgba(0,0,0,0);
  • -webkit-user-select: none;
  • -webkit-touch-callout: none;
  • -webkit-user-drag: none;
}


user agent stylesheet
div {
  • display: block;
}

Pseudo ::before element


*, ::after, ::before {
  • -webkit-box-sizing: border-box;
  • box-sizing: border-box;
  • -webkit-tap-highlight-color:rgba(0,0,0,0);
  • -webkit-user-select: none;
  • -webkit-touch-callout: none;
  • -webkit-user-drag: none;
}

Pseudo ::after element


*, ::after, ::before {
  • -webkit-box-sizing: border-box;
  • box-sizing: border-box;
  • -webkit-tap-highlight-color:rgba(0,0,0,0);
  • -webkit-user-select: none;
  • -webkit-touch-callout: none;
  • -webkit-user-drag: none;
}

Inherited from div#ext-component-59.x-unsized.x-list-item-body


.touchgridpanel.x-list .x-list-item .x-list-item-label, .touchgridpanel .x-list-item-body {
  • font-size: 100%;
}

Inherited from div#ext-listitem-19.x-container.x-list-item.x-stretched.x-touchgrid-item.x-list-item-first.x-list-header-wrap


.x-list .x-list-item {
  • color: #000;
}

Inherited from body#ext-element-3.x-desktop.x-windows.x-chrome.x-landscape


body.x-desktop {
  • font-size: 114%;
}



body {
  • font-size: 104%;
}



html, body {
  • font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica,"BBAlpha Sans",sans-serif;
  • font-weight: normal;
}



body {
  • color: red;
}

Inherited from html


html, body {
  • font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica,"BBAlpha Sans",sans-serif;
  • font-weight: normal;
}












 element.style {
  • font-size: 0.7em;
  • padding-left: 0.8em;
  • width: 15%;
}

Matched CSS Rules


body, div, dl, dt,dd, ul, ol, li, h1, h2, h3, h4, h5,h6, pre, code, form, fieldset,legend, input, textarea, p,blockquote, th, td {
  • margin: 0;
  • padding: 0;
}



*, ::after,::before {
  • -webkit-box-sizing: border-box;
  • box-sizing: border-box;
  • -webkit-tap-highlight-color:rgba(0,0,0,0);
  • -webkit-user-select: none;
  • -webkit-touch-callout: none;
  • -webkit-user-drag: none;
}


user agent stylesheet
div {
  • display: block;
}

Pseudo ::before element


*, ::after,::before {
  • -webkit-box-sizing: border-box;
  • box-sizing: border-box;
  • -webkit-tap-highlight-color:rgba(0,0,0,0);
  • -webkit-user-select: none;
  • -webkit-touch-callout: none;
  • -webkit-user-drag: none;
}

Pseudo ::after element


*, ::after,::before {
  • -webkit-box-sizing: border-box;
  • box-sizing: border-box;
  • -webkit-tap-highlight-color:rgba(0,0,0,0);
  • -webkit-user-select: none;
  • -webkit-touch-callout: none;
  • -webkit-user-drag: none;
}

Inherited from div#ext-component-59.x-unsized.x-list-item-body


.touchgridpanel.x-list .x-list-item .x-list-item-label, .touchgridpanel .x-list-item-body {
  • font-size: 100%;
}

Inherited from div#ext-listitem-19.x-container.x-list-item.x-stretched.x-touchgrid-item.x-list-item-first.x-list-header-wrap


.x-list .x-list-item {
  • color: #000;
}

Inherited from body#ext-element-3.x-desktop.x-windows.x-chrome.x-landscape


body.x-desktop {
  • font-size: 114%;
}



body {
  • font-size: 104%;
}



html, body {
  • font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica,"BBAlpha Sans",sans-serif;
  • font-weight: normal;
}



body {
  • color: red;
}

Inherited from html


html, body {
  • font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica,"BBAlpha Sans",sans-serif;
  • font-weight: normal;
}

The CSS portion of my app.json:

Code:
    "css": [        {
            "path": "resources/css/Ext.ux.grid.View.css",
            "update": "delta"
        },
        {
            "path": "resources/css/mobilePFM.css",
            "update": "delta"
        },
        {
            "path": "resources/css/app.css",
            "update": "delta"
        }
    ],
The kicker is that it was working for a time but no longer. I've tried:

changing the app.json update for custom css files (not app.css) to full.
adding
Code:
AddType text/cache-manifest .appcache
to my httpd.conf (apache 2.2 on windows)
moving app.css to the bottom of the list of css files in app.json (was at the top)
scratching my head

The difference looks like this:css discrepancy.png