From 3e502449f8dab11aceb2fc1d573afc55d7c1d586 Mon Sep 17 00:00:00 2001
From: Aswin S <mr.aswin@gmail.com>
Date: Thu, 26 Oct 2023 05:16:49 +0530
Subject: [PATCH 1/2] fix: webkit z-index bug where canvas renders above
 controls

---
 src/components/MapView/MapView.web.tsx | 1 +
 src/components/MapView/css-fix.css     | 9 +++++++++
 2 files changed, 10 insertions(+)
 create mode 100644 src/components/MapView/css-fix.css

diff --git a/src/components/MapView/MapView.web.tsx b/src/components/MapView/MapView.web.tsx
index 78c5a9175594..c696a927f16d 100644
--- a/src/components/MapView/MapView.web.tsx
+++ b/src/components/MapView/MapView.web.tsx
@@ -18,6 +18,7 @@ import Direction from './Direction';
 import {MapViewHandle, MapViewProps} from './MapViewTypes';
 
 import 'mapbox-gl/dist/mapbox-gl.css';
+import './css-fix.css';
 
 const MapView = forwardRef<MapViewHandle, MapViewProps>(
     ({style, styleURL, waypoints, mapPadding, accessToken, directionCoordinates, initialState = {location: CONST.MAPBOX.DEFAULT_COORDINATE, zoom: CONST.MAPBOX.DEFAULT_ZOOM}}, ref) => {
diff --git a/src/components/MapView/css-fix.css b/src/components/MapView/css-fix.css
new file mode 100644
index 000000000000..7b827e16c3ed
--- /dev/null
+++ b/src/components/MapView/css-fix.css
@@ -0,0 +1,9 @@
+.mapboxgl-ctrl-bottom-left {
+  -webkit-transform: translate3d(0, 0, 1px);
+  transform: translate3d(0, 0, 1px);
+}
+
+.mapboxgl-ctrl-bottom-right {
+  -webkit-transform: translate3d(0, 0, 1px);
+  transform: translate3d(0, 0, 1px);
+}
\ No newline at end of file

From 0ce77880615ac5eda127b934ee99da454a80cd64 Mon Sep 17 00:00:00 2001
From: Aswin S <mr.aswin@gmail.com>
Date: Wed, 1 Nov 2023 10:12:11 +0530
Subject: [PATCH 2/2] fix: update css file name and add comment

---
 src/components/MapView/MapView.web.tsx             | 2 +-
 src/components/MapView/{css-fix.css => mapbox.css} | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)
 rename src/components/MapView/{css-fix.css => mapbox.css} (59%)

diff --git a/src/components/MapView/MapView.web.tsx b/src/components/MapView/MapView.web.tsx
index 367da247932c..d706168f076f 100644
--- a/src/components/MapView/MapView.web.tsx
+++ b/src/components/MapView/MapView.web.tsx
@@ -10,8 +10,8 @@ import {View} from 'react-native';
 import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
-import './css-fix.css';
 import Direction from './Direction';
+import './mapbox.css';
 import {MapViewHandle, MapViewProps} from './MapViewTypes';
 import responder from './responder';
 import utils from './utils';
diff --git a/src/components/MapView/css-fix.css b/src/components/MapView/mapbox.css
similarity index 59%
rename from src/components/MapView/css-fix.css
rename to src/components/MapView/mapbox.css
index 7b827e16c3ed..5fa692d7ff46 100644
--- a/src/components/MapView/css-fix.css
+++ b/src/components/MapView/mapbox.css
@@ -1,3 +1,6 @@
+/* Fixes an issue with Webkit where map canvas loses zIndex order and draws above attribution controls
+   https://github.com/Expensify/App/issues/27800
+*/
 .mapboxgl-ctrl-bottom-left {
   -webkit-transform: translate3d(0, 0, 1px);
   transform: translate3d(0, 0, 1px);