IE Slicer in application-level .scss without custom theme.
Cmd version tested:
Ext version tested:Browser versions tested against:
- Cmd 22.214.171.124
- Cmd 126.96.36.199
- Cmd 188.8.131.52
DOCTYPE tested against:
- IE 11.0.9600.16428, Update Versions: RTM (KB2841134)
- !DOCTYPE HTML in index.html generated by Cmd
Steps to reproduce the problem:
- SASS-styles with ui mixins doesn't slicing properly for legacy IE during sencha app build. I created new application "Bugreport" and changed default sass namespace to undefined, because i want to style components with both namespaces, Ext and Bugreport. Then, I write style for ExtJS panel using ui mixin. It works and looks right in modern browsers, but not in old IE. Older IE are emulating in IE11 with Developer Tools IE5-8 modes.
The result that was expected:
- > sencha -sdk [path_to_extjs_framework] generate app bugreport bugreport
- clear app.sass.namespace variable in \bugreport\.sencha\app\sencha.cfg (just remove 'bugreport' value)
- append ui: 'bug', to west panel in \bugreport\app\view\Main.js
- declare this ui in \bugreport\sass\src\Ext\panel\panel.scss
@include extjs-panel-ui( $ui: 'bug', $ui-body-border-width: 0, $ui-body-background-color: red, $ui-border-radius: 5px, $ui-border-width: 5px, $ui-border-color: red);
- > sencha app build
The result that occurs instead:
- application with west panel and tabbar in the center
- west panel with 'bug' ui has red background and rounded border
- west panel has no rounded border in IE < 9. See second attached image.