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:
Piotr Sarnacki 2012-11-03 23:09:37 +01:00
parent adab32f90f
commit 97e5774631

View File

@ -2,16 +2,23 @@
$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
height: 100%
.application
width: 100%
min-height: 100%
@include display-box
@include box-orient(horizontal)
@include box-align(stretch)
margin-top: 40px
@include display-flex
display: -moz-box
#top
position: absolute
@ -22,11 +29,12 @@ html, body
z-index: 1000
#left, #right
@include box-flex(0)
position: relative
min-height: 100%
-moz-box-flex: 0
#left
@include flex(1, 1, 30%)
min-width: 250px
max-width: 380px
width: -webkit-calc(100% - 1000px)
@ -40,13 +48,15 @@ html, body
max-width: 300px
#main
@include box-flex(4)
@include flex(1, 1, 70%)
-moz-box-flex: 4
position: relative
overflow: hidden
min-width: 630px
padding: 20px 40px 80px 30px
#right
@include flex(1, 1, 0)
width: 205px
padding: 11px 20px 80px 20px
background-color: $color-bg-right