diff --git a/assets/javascripts/lib/util.coffee b/assets/javascripts/lib/util.coffee index f90638cc..d29aa47e 100644 --- a/assets/javascripts/lib/util.coffee +++ b/assets/javascripts/lib/util.coffee @@ -314,6 +314,13 @@ $.framify = (fn, obj) -> else fn +$.requestAnimationFrame = (fn) -> + if window.requestAnimationFrame + requestAnimationFrame(fn) + else + setTimeout(fn, 0) + return + # # Miscellaneous # diff --git a/assets/javascripts/views/sidebar/doc_picker.coffee b/assets/javascripts/views/sidebar/doc_picker.coffee index d0890351..98a8421f 100644 --- a/assets/javascripts/views/sidebar/doc_picker.coffee +++ b/assets/javascripts/views/sidebar/doc_picker.coffee @@ -20,7 +20,6 @@ class app.views.DocPicker extends app.View activate: -> if super @render() - @findByTag('input')?.focus() app.appCache?.on 'progress', @onAppCacheProgress $.on @el, 'focus', @onDOMFocus, true return @@ -47,9 +46,9 @@ class app.views.DocPicker extends app.View @html html + @tmpl('sidebarPickerNote') + @tmpl('sidebarSave') @refreshElements() - @delay -> # trigger animation - @el.offsetWidth + $.requestAnimationFrame => @addClass '_in' + @findByTag('input')?.focus() return renderVersions: (docs) -> diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss index 93680e7a..61dda752 100644 --- a/assets/stylesheets/components/_sidebar.scss +++ b/assets/stylesheets/components/_sidebar.scss @@ -12,6 +12,7 @@ overflow-x: hidden; overflow-y: scroll; background: $sidebarBackground; + background-clip: content-box; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; // IE 10 doesn't support pointer-events @extend %user-select-none; @@ -339,10 +340,12 @@ // ._list-picker { - opacity: 0; - transition: .2s; + > ._list, > ._list-item { + opacity: 0; + transition: .2s; + } + &._in { > ._list, > ._list-item { opacity: 1; } } - &._in { opacity: 1; } ._list-item { cursor: pointer; } ._list-sub > ._list-item { padding-left: 2.375rem; } } @@ -378,6 +381,8 @@ width: $sidebarWidth; background: $sidebarBackground; box-shadow: inset -1px 0 $sidebarBorder; + -webkit-transform: translateZ(0); + transform: translateZ(0); @media #{$mediumScreen} { width: $sidebarMediumWidth; }