Fix the page flickers when the search dialog pops up

next-theme · Dec 12, 2024 · 5697532 · 5697532
1 parent 77adbf5
commit 5697532
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 2 deletions.
diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl
@@ -1,6 +1,7 @@
 if (hexo-config('local_search.enable') or hexo-config('algolia_search.enable')) {
   .search-active {
     overflow: hidden;
+    padding-right: var(--dialog-scrollgutter, 0);
   }
 
   .search-pop-overlay {

diff --git a/source/css/_common/outline/header/github-banner.styl b/source/css/_common/outline/header/github-banner.styl
@@ -22,7 +22,7 @@ if (hexo-config('github_banner.enable')) {
       color: white;
       fill: var(--theme-color);
       position: absolute;
-      right: 0;
+      right: var(--dialog-scrollgutter, 0);
       top: 0;
       z-index: $zindex-0;
     }

diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl
@@ -16,7 +16,6 @@ body {
   line-height: $line-height-base;
   min-height: 100%;
   position: relative;
-  transition: padding $transition-ease;
 
   if (hexo-config('body_scrollbar.overlay')) {
     overflow-x: hidden;

diff --git a/source/js/third-party/search/algolia-search.js b/source/js/third-party/search/algolia-search.js
@@ -96,6 +96,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Handle and trigger popup window
   document.querySelectorAll('.popup-trigger').forEach(element => {
     element.addEventListener('click', () => {
+      document.body.style.setProperty("--dialog-scrollgutter", `${window.innerWidth - document.body.clientWidth}px`);
       document.body.classList.add('search-active');
       // Wait for search-popup animation to complete
       setTimeout(() => input.focus(), 500);
@@ -104,6 +105,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Monitor main search box
   const onPopupClose = () => {
+    document.body.style.setProperty("--dialog-scrollgutter", 0);
     document.body.classList.remove('search-active');
   };
 
@@ -117,6 +119,7 @@ document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('keydown', event => {
     if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
       event.preventDefault();
+      document.body.style.setProperty("--dialog-scrollgutter", `${window.innerWidth - document.body.clientWidth}px`);
       document.body.classList.add('search-active');
       setTimeout(() => input.focus(), 500);
     }

diff --git a/source/js/third-party/search/local-search.js b/source/js/third-party/search/local-search.js
@@ -57,6 +57,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Handle and trigger popup window
   document.querySelectorAll('.popup-trigger').forEach(element => {
     element.addEventListener('click', () => {
+      document.body.style.setProperty("--dialog-scrollgutter", `${window.innerWidth - document.body.clientWidth}px`);
       document.body.classList.add('search-active');
       // Wait for search-popup animation to complete
       setTimeout(() => input.focus(), 500);
@@ -66,6 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Monitor main search box
   const onPopupClose = () => {
+    document.body.style.setProperty("--dialog-scrollgutter", 0);
     document.body.classList.remove('search-active');
   };
 
@@ -82,6 +84,7 @@ document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('keydown', event => {
     if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
       event.preventDefault();
+      document.body.style.setProperty("--dialog-scrollgutter", `${window.innerWidth - document.body.clientWidth}px`)
       document.body.classList.add('search-active');
       setTimeout(() => input.focus(), 500);
       if (!localSearch.isfetched) localSearch.fetchData();