mirror of
https://github.com/thelounge/thelounge
synced 2024-11-10 22:54:15 +00:00
Merge pull request #1120 from thelounge/xpaw/scroll-perf
Include trickery to reduce paints and improve performance
This commit is contained in:
commit
2091a5b41b
2 changed files with 15 additions and 28 deletions
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue