From 8237cee1c095924809f1e84e0b3128048c69d53b Mon Sep 17 00:00:00 2001
From: grimlink <sean.grimlink@gmail.com>
Date: Fri, 2 Oct 2026 18:16:37 +0200
Subject: [PATCH] FIX: Disable view transitions in Meta in-app browser

Fixes #30
---
 CHANGELOG.md                               |  5 +++++
 view/base/templates/view-transitions.phtml | 17 +++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 632d155..e3d153e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## [Unreleased]
+
+### Fixed
+- Blank pages on navigation in the Facebook and Instagram in-app browser on Android. View transitions are now disabled in these in-app browsers ([#30](https://github.com/mage-os/module-theme-optimization/issues/30)).
+
 ## [2.3.0] - 2026-05-11
 
 ### Added
diff --git a/view/base/templates/view-transitions.phtml b/view/base/templates/view-transitions.phtml
index 87e4d0e..42a068d 100644
--- a/view/base/templates/view-transitions.phtml
+++ b/view/base/templates/view-transitions.phtml
@@ -19,6 +19,23 @@ $style = <<<CSS
 CSS;
 echo $secureRenderer->renderTag('style', [], $style, false);
 
+/*
+ * The Facebook and Instagram apps on Android ship their own Chromium based WebView, which starts the
+ * cross-document view transition but never finishes it, so the page stays blank after navigating.
+ * Inserted after the style above, so it wins and disables the transition in these in-app browsers.
+ */
+$inAppBrowserScript = <<<JS
+    (() => {
+        const userAgent = navigator.userAgent;
+        if (!/android/i.test(userAgent) || !/FBAN|FBAV|FB_IAB|Instagram/.test(userAgent)) return;
+
+        const style = document.createElement('style');
+        style.textContent = '@view-transition { navigation: none; }';
+        document.currentScript.after(style);
+    })();
+JS;
+echo $secureRenderer->renderTag('script', [], $inAppBrowserScript, false);
+
 if ($viewModel->isEnabledForBfcache() === false) {
     $script = <<<JS
         window.addEventListener('pagereveal', (e) => {