From 66e3095a31795ec39cec802758ef4f57e36959c6 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Fri, 14 Aug 2026 16:45:16 +0800
Subject: [PATCH] Fix search-popup animation using template

---
 layout/_partials/search/index.njk              | 6 ++++--
 source/js/third-party/search/algolia-search.js | 1 +
 source/js/third-party/search/local-search.js   | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/layout/_partials/search/index.njk b/layout/_partials/search/index.njk
index edb64d1..b562b2a 100644
--- a/layout/_partials/search/index.njk
+++ b/layout/_partials/search/index.njk
@@ -1,5 +1,7 @@
 {%- if theme.algolia_search.enable or theme.local_search.enable %}
-  <div class="search-pop-overlay">
+  {# Keep the popup out of the render tree to prevent Safari from animating it before main.css is applied.
+     When main.css loads slowly, the unstyled search popup briefly appears and shrinks away. #}
+  <template id="search-popup-template"><div class="search-pop-overlay">
     <div class="popup search-popup">
       <div class="search-header">
         <span class="search-icon">
@@ -20,5 +22,5 @@
         </div>
       </div>
     </div>
-  </div>
+  </div></template>
 {%- endif %}
diff --git a/source/js/third-party/search/algolia-search.js b/source/js/third-party/search/algolia-search.js
index 1b22ab2..db19a77 100644
--- a/source/js/third-party/search/algolia-search.js
+++ b/source/js/third-party/search/algolia-search.js
@@ -1,6 +1,7 @@
 /* global CONFIG, NexT, pjax */
 
 document.addEventListener('DOMContentLoaded', () => {
+  document.body.appendChild(document.querySelector('#search-popup-template').content.cloneNode(true));
   const { indexName, appID, apiKey, hits } = CONFIG.algolia;
   const client = window['algoliasearch/lite'].liteClient(appID, apiKey);
 
diff --git a/source/js/third-party/search/local-search.js b/source/js/third-party/search/local-search.js
index d08e119..a8dfc0c 100644
--- a/source/js/third-party/search/local-search.js
+++ b/source/js/third-party/search/local-search.js
@@ -6,6 +6,7 @@ document.addEventListener('DOMContentLoaded', () => {
     console.warn('`hexo-generator-searchdb` plugin is not installed!');
     return;
   }
+  document.body.appendChild(document.querySelector('#search-popup-template').content.cloneNode(true));
   const localSearch = new LocalSearch({
     path             : CONFIG.path,
     top_n_per_article: CONFIG.localsearch.top_n_per_article,