fix: update back-to-top button styles for better compatibility and performance

assets/css/_partials/_widgets/_fixed-button.scss

@@ -46,17 +46,18 @@
   overflow: hidden;
   position: relative;
   // Ring stroke width
-  --b2t-stroke: 0.5rem;
+  #{$rootPrefix}b2t-stroke: 0.5rem;
   // Ring background color
-  --b2t-bg: #{$global-border-color};
+  #{$rootPrefix}b2t-bg: #{$global-border-color};
   // Progress color
-  --b2t-prog: #FF7359;
-  // 2π×50 ≈ 314 (radius 50 for viewBox 100)
-  --b2t-circumference: 314;
+  #{$rootPrefix}b2t-prog: #FF7359;
+  // dasharray = circumference = 2πr
+  // dashoffset = circumference * (1 - scrollPercent / 100)
+  #{$rootPrefix}b2t-dasharray: 314.15;
 
   [data-theme='dark'] & {
-    --b2t-bg: #{$global-border-color-dark};
-    --b2t-prog: #{$global-font-color-dark};
+    #{$rootPrefix}b2t-bg: #{$global-border-color-dark};
+    #{$rootPrefix}b2t-prog: #{$global-font-color-dark};
   }
 
   // SVG circular progress ring
@@ -72,18 +73,18 @@
 
   .bg {
     fill: none;
-    stroke: var(--b2t-bg);
-    stroke-width: var(--b2t-stroke);
+    stroke: var(#{$rootPrefix}b2t-bg);
+    stroke-width: var(#{$rootPrefix}b2t-stroke);
   }
 
   // Progress ring
   .progress {
     fill: none;
-    stroke: var(--b2t-prog);
-    stroke-width: var(--b2t-stroke);
+    stroke: var(#{$rootPrefix}b2t-prog);
+    stroke-width: var(#{$rootPrefix}b2t-stroke);
     stroke-linecap: round;
-    stroke-dasharray: var(--b2t-circumference);
-    stroke-dashoffset: calc(var(--b2t-circumference) - var(--b2t-circumference) * var(--scroll-percent, 0) / 100);
+    stroke-dasharray: var(#{$rootPrefix}b2t-dasharray);
+    stroke-dashoffset: calc(var(#{$rootPrefix}b2t-dasharray) * (1 - var(#{$rootPrefix}b2t-progress, 0) / 100));
     transition: stroke-dashoffset .1s linear;
   }
 }

assets/js/theme.js

@@ -1305,7 +1305,6 @@ class FixIt {
     if (document.body.dataset.headerMobile === 'auto') {
       $headers.push(document.getElementById('header-mobile'));
     }
-    // b2t button click event
     $backToTop?.addEventListener('click', () => {
       this.util.scrollIntoView('body');
     });
@@ -1345,8 +1344,13 @@ class FixIt {
             $backToTop.classList.contains('animate__fadeOut') && $backToTop.classList.add('d-none');
           });
         }
-        // [todo] Shares the scrollPercent variable with readingProgressBar
-        $backToTop.style.setProperty('--scroll-percent', scrollPercent.toFixed(2));
+        // Set progress as 0-100 value for CSS calculation
+        $backToTop.style.setProperty('--fi-b2t-progress', scrollPercent.toFixed(2));
+        // Calculate stroke-dashoffset for Firefox compatibility
+        if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
+          const dashoffset = 2 * Math.PI * 50 * (1 - scrollPercent / 100);
+          $backToTop.querySelector('circle.progress').style.strokeDashoffset = dashoffset.toFixed(2);
+        }
       }
       for (let event of this.scrollEventSet) {
         event();

layouts/_partials/init/index.html

@@ -1,4 +1,4 @@
-{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251120045335-afc8c075" -}}
+{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251120082103-1a998f76" -}}
 {{- .Store.Set "this" dict -}}
 
 {{- partial "init/detection-env.html" . -}}