From ea479021272c060272c016d75f6822e7a6d4ab7a Mon Sep 17 00:00:00 2001 From: mummified-corroding-granny Date: Fri, 27 Jan 2023 06:08:29 +0000 Subject: [PATCH] reduce scroll chaining on scrollable modals (#100) Small lil PR to reduce/minimize overscroll (aka scroll chaining) when scrolling to the end of scrollable modals. Also relevant to mobile Primary targets: - GIFs scrollable tabs body - EMOJI scrollable tabs body - AWARDS scrollable tabs body Should (TM) apply to other scrollable modals if the same HTML structure is used Very important notes (TM): * this does not apply to non-scrollable modals (e.g. delete and report) * this only applies to the body of the modal where scrollable content is usually located (as per selector). Example of when it does not apply: * if we try to scroll near the search bar (e.g. on GIFs modal), we will still scroll the background * if we make the modal non-scrollable (e.g. limited search in emoji or its tabs), there is no overscroll protection Why I chose this implementation: * I have implemented this recently when all browsers started supporting it in the last months of 2022 * we cannot just disable the main body/html element scrollbar because it is likely to create headache-inducing content redraw situations * minimalistic and it is a relatively modern way to do it * about 300% better than some client-side javascript spaghetteh to avoid content redraws * methodical alternative is to reimplement site-wide modals/scrolling (LMAO) * I did not apply it to .modal-body because it does not work when we scroll in the empty area on the sides of the scrollable area (which I always do). Reviewed-on: https://fsdfsd.net/rDrama/rDrama/pulls/100 Co-authored-by: mummified-corroding-granny Co-committed-by: mummified-corroding-granny --- files/assets/css/main.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/files/assets/css/main.css b/files/assets/css/main.css index 9748b7397..a7aa1c432 100644 --- a/files/assets/css/main.css +++ b/files/assets/css/main.css @@ -1897,6 +1897,11 @@ button.close { .modal-dialog-scrollable .modal-body { overflow-y: auto; } + +.modal-content > div:last-child { + overscroll-behavior: contain; +} + .modal-dialog-centered { display: flex; align-items: center;