fix: resolve image flickering in the access section on mobile

Vanilla-OS · Dec 29, 2024 · ab63d5f · ab63d5f
1 parent 16b288e
commit ab63d5f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/public/assets/css/components/hero.css b/public/assets/css/components/hero.css
@@ -210,6 +210,11 @@
         max-width: 100%;
     }
 
+    /* Fix image flickering on mobile */
+    #access .hero-image { 
+        width: 900px;
+    }
+
     .hero.hero--bg-center .hero-wrapper {
         padding: 0;
     }

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -130,7 +130,7 @@
 
   <section class="hero hero--big hero--bg-center hero--extra-margin" id="access">
     <article class="hero-wrapper container">
-      <img class="hero-image onFocus" data-focus-class="fadeInZoom" src="/assets/images/backgrounds/apps-overview.png"
+      <img class="hero-image onFocus" data-focus-class="fadeIn" src="/assets/images/backgrounds/apps-overview.png"
         alt="Access the largest set of applications." />
       <div class="hero-content">
         <header class="hero-heading">