diff --git a/client/css/style.css b/client/css/style.css index 28f99e98..3b510fe1 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -140,10 +140,6 @@ kbd { .container { margin: 80px auto; max-width: 480px; - overflow: hidden; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - padding: 0 30px; } ::-moz-placeholder { @@ -374,8 +370,7 @@ kbd { } #viewport.rt #chat .sidebar { - -webkit-transform: translate3d(180px, 0, 0); - transform: translate3d(180px, 0, 0); + right: -180px; } #sidebar { @@ -389,6 +384,10 @@ kbd { width: 220px; } +#viewport.menu-open #sidebar { + will-change: transform; +} + #sidebar button, #sidebar .chan, #sidebar .sign-out { @@ -764,6 +763,7 @@ kbd { left: 0; right: 0; overflow: auto; + will-change: transform, scroll-position; -webkit-overflow-scrolling: touch; position: absolute; } @@ -787,9 +787,7 @@ kbd { position: absolute; right: 0; width: 180px; - transition: all .4s; - -webkit-transform: translateZ(0); - transform: translateZ(0); + transition: right .4s; } #chat .show-more { @@ -1164,6 +1162,7 @@ kbd { bottom: 0; overflow: auto; overflow-x: hidden; + will-change: transform, scroll-position; -webkit-overflow-scrolling: touch; padding-bottom: 10px; position: absolute; @@ -1850,11 +1849,6 @@ kbd { margin-top: 60px !important; } - #viewport.rt #chat .sidebar { - -webkit-transform: translate3d(-180px, 0, 0); - transform: translate3d(-180px, 0, 0); - } - #sidebar, #footer { left: -220px; @@ -1889,22 +1883,15 @@ kbd { right: -180px; } + #viewport.rt #chat .sidebar { + right: 0; + } + #chat .title:before { display: none; } } -@media (min-width: 769px) { - #viewport { - -webkit-transform: none !important; - transform: none !important; - } - - #viewport.menu-open { - transition: none; - } -} - @media (max-width: 479px) { .container { margin: 40px 0 !important; diff --git a/client/js/libs/slideout.js b/client/js/libs/slideout.js index 34faa9a8..93ec86c1 100644 --- a/client/js/libs/slideout.js +++ b/client/js/libs/slideout.js @@ -23,7 +23,7 @@ module.exports = function slideoutMenu(viewport, menu) { function onTouchStart(e) { if (e.touches.length !== 1) { onTouchEnd(); - return false; + return; } var touch = e.touches.item(0); @@ -37,7 +37,7 @@ module.exports = function slideoutMenu(viewport, menu) { touchStartTime = Date.now(); viewport.addEventListener("touchmove", onTouchMove); - viewport.addEventListener("touchend", onTouchEnd); + viewport.addEventListener("touchend", onTouchEnd, {passive: true}); } } @@ -91,7 +91,7 @@ module.exports = function slideoutMenu(viewport, menu) { menuIsMoving = false; } - viewport.addEventListener("touchstart", onTouchStart); + viewport.addEventListener("touchstart", onTouchStart, {passive: true}); return { disable: disableSlideout,