Fix hiccups with long log views
When scrolling page with long log page was freezing for a moment on every DOM update (which means at least for a second as we update duration every second). This was caused by unnecassery reflows - the main offender was display: box (flexible layout model). It turns out that newer version of flexible layout, display: flex, behaves much better. It works on newest versions of Chrome, Safari and on next version of Opera. Unfortunately Firefox will support it in 18th version, so I left rules with -moz prefixes for old flexible page model
This commit is contained in:
parent
adab32f90f
commit
97e5774631
|
@ -2,16 +2,23 @@
|
||||||
|
|
||||||
$left-width: 250px
|
$left-width: 250px
|
||||||
|
|
||||||
|
@mixin display-flex
|
||||||
|
display: -webkit-flex
|
||||||
|
display: flex
|
||||||
|
|
||||||
|
@mixin flex($grow, $shrink, $size)
|
||||||
|
-webkit-flex: $grow $shrink $size
|
||||||
|
flex: $grow $shrink $size
|
||||||
|
|
||||||
html, body
|
html, body
|
||||||
height: 100%
|
height: 100%
|
||||||
|
|
||||||
.application
|
.application
|
||||||
width: 100%
|
width: 100%
|
||||||
min-height: 100%
|
min-height: 100%
|
||||||
@include display-box
|
|
||||||
@include box-orient(horizontal)
|
|
||||||
@include box-align(stretch)
|
|
||||||
margin-top: 40px
|
margin-top: 40px
|
||||||
|
@include display-flex
|
||||||
|
display: -moz-box
|
||||||
|
|
||||||
#top
|
#top
|
||||||
position: absolute
|
position: absolute
|
||||||
|
@ -22,11 +29,12 @@ html, body
|
||||||
z-index: 1000
|
z-index: 1000
|
||||||
|
|
||||||
#left, #right
|
#left, #right
|
||||||
@include box-flex(0)
|
|
||||||
position: relative
|
position: relative
|
||||||
min-height: 100%
|
min-height: 100%
|
||||||
|
-moz-box-flex: 0
|
||||||
|
|
||||||
#left
|
#left
|
||||||
|
@include flex(1, 1, 30%)
|
||||||
min-width: 250px
|
min-width: 250px
|
||||||
max-width: 380px
|
max-width: 380px
|
||||||
width: -webkit-calc(100% - 1000px)
|
width: -webkit-calc(100% - 1000px)
|
||||||
|
@ -40,13 +48,15 @@ html, body
|
||||||
max-width: 300px
|
max-width: 300px
|
||||||
|
|
||||||
#main
|
#main
|
||||||
@include box-flex(4)
|
@include flex(1, 1, 70%)
|
||||||
|
-moz-box-flex: 4
|
||||||
position: relative
|
position: relative
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
min-width: 630px
|
min-width: 630px
|
||||||
padding: 20px 40px 80px 30px
|
padding: 20px 40px 80px 30px
|
||||||
|
|
||||||
#right
|
#right
|
||||||
|
@include flex(1, 1, 0)
|
||||||
width: 205px
|
width: 205px
|
||||||
padding: 11px 20px 80px 20px
|
padding: 11px 20px 80px 20px
|
||||||
background-color: $color-bg-right
|
background-color: $color-bg-right
|
||||||
|
|
Loading…
Reference in New Issue
Block a user