Fix: facebook browser styles

test fb fix

Fix: facebook browser styles

.eslintrc.cjs

@@ -17,7 +17,7 @@ module.exports = {
     sourceType: 'module',
     project: 'tsconfig.json',
   },
-  plugins: ['react', '@typescript-eslint', 'prettier'],
+  plugins: ['react', '@typescript-eslint', 'prettier', 'import'],
   rules: {
     'react/react-in-jsx-scope': 0,
     'react/prop-types': 'off',

package.json

@@ -23,6 +23,7 @@
     "vite-plugin-svgr": "^3.2.0"
   },
   "devDependencies": {
+    "@types/node": "^20.14.12",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/styled-components": "^5.1.26",
@@ -42,4 +43,4 @@
     "typescript": "^5.1.3",
     "vite": "^4.2.0"
   }
-}
+}

src/components/shared/BrowserFix/BrowserFix.tsx

@@ -7,28 +7,27 @@ const DefaultGlobalStyle = createGlobalStyle`
   }
 `;
 
-const InstagramGlobalStyle = createGlobalStyle`
+const InstagramAndFacebookGlobalStyle = createGlobalStyle`
   :root {
     --vw-fix: 1.25;
   }
 
   html {
     font-size: 76.15%;
   }
-  
 `;
 
-function BrowserFix() {
+export default function BrowserFix() {
   let Fix = DefaultGlobalStyle;
 
-  if (getUA.includes('Instagram')) {
-    Fix = InstagramGlobalStyle;
+  if (getUA.includes('Instagram') || getUA.includes('FB_IAB')) {
+    Fix = InstagramAndFacebookGlobalStyle;
   }
 
-  if (!Fix) {
-    return null;
-  }
   return <Fix />;
 }
 
-export default BrowserFix;
+// What I saw in Messenger Browser
+// 'Mozilla/5.0 (Linux; Android 14; SM-S926U1 Build/UP1A.231005.007; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/126.0.6478.186 Mobile Safari/537.36 [FB_IAB/FB4A;FBAV/467.1.0.45.109;]'
+// What I saw in Facebook's Browser
+// 'Mozilla/5.0 (Linux; Android 14; SM-S926U1 Build/UP1A.231005.007; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/127.0.6533.61 Mobile Safari/537.36 [FB_IAB/FB4A;FBAV/474.0.0.44.74;]'

src/pages/Home.tsx

@@ -1,20 +1,21 @@
 // Components
+import ImageBanner from '@components/ImageBanner/ImageBanner';
 import LogoGrid from '@components/LogoGrid/LogoGrid';
+import SplitContent from '@components/SplitContent/SplitContent';
 import Heading from '@components/shared/Heading/Heading';
 import Section from '@components/shared/Section/Section';
-import ImageBanner from '@components/ImageBanner/ImageBanner';
-import SplitContent from '@components/SplitContent/SplitContent';
 // Utils
 import getFixedCSSvw from '@utils/getFixedCSSvw';
 // Content
+import { getUA } from 'react-device-detect';
 import {
-  homeCTA,
+  HomeHeroHeadingText,
   homeAboutMe,
+  homeCTA,
+  homeImageBanner,
   homeLogoGrid,
-  homeServices,
   homeLogoGridTwo,
-  homeImageBanner,
-  HomeHeroHeadingText,
+  homeServices,
 } from './content/Home';
 import sharedContact from './content/shared/sharedContact';
 
@@ -28,6 +29,8 @@ function Home() {
           {HomeHeroHeadingText}
         </Heading>
       </Section>
+
+      {getUA}
       <SplitContent
         contain
         leftContent={homeCTA.leftContent}

vite.config.ts

@@ -1,10 +1,13 @@
-/* eslint-disable import/no-extraneous-dependencies */
 /** @type {import('vite').UserConfig} */
-
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { defineConfig } from 'vite';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import react from '@vitejs/plugin-react-swc';
 import svgr from 'vite-plugin-svgr';
 import path from 'path';
+import dns from 'node:dns';
+
+dns.setDefaultResultOrder('verbatim');
 
 // https://vitejs.dev/config/
 export default defineConfig({