diff --git a/src/render/program/circle_program.js b/src/render/program/circle_program.js
index 58c7014dca5..5a70c83c244 100644
--- a/src/render/program/circle_program.js
+++ b/src/render/program/circle_program.js
@@ -10,13 +10,14 @@ import {
 
 import type Context from '../../gl/context.js';
 import type {UniformValues, UniformLocations} from '../uniform_binding.js';
-import type {OverscaledTileID} from '../../source/tile_id.js';
+import {CanonicalTileID, OverscaledTileID} from '../../source/tile_id.js';
 import type Tile from '../../source/tile.js';
 import type CircleStyleLayer from '../../style/style_layer/circle_style_layer.js';
 import type Painter from '../painter.js';
 import browser from '../../util/browser.js';
 import {mat4} from 'gl-matrix';
 import {globeToMercatorTransition, globePixelsToTileUnits} from '../../geo/projection/globe_util.js';
+import EXTENT from '../../data/extent.js';
 
 export type CircleUniformsType = {|
     'u_camera_to_center_distance': Uniform1f,
@@ -94,7 +95,9 @@ const circleUniformValues = (
         values['u_merc_center'] = mercatorCenter;
         values['u_tile_id'] = [coord.canonical.x, coord.canonical.y, 1 << coord.canonical.z];
         values['u_zoom_transition'] = globeToMercatorTransition(transform.zoom);
-        values['u_up_dir'] = (transform.projection.upVector(coord.canonical, mercatorCenter[0], mercatorCenter[1]): any);
+        const x = mercatorCenter[0] * EXTENT;
+        const y = mercatorCenter[1] * EXTENT;
+        values['u_up_dir'] = (transform.projection.upVector(new CanonicalTileID(0, 0, 0), x, y): any);
     }
 
     return values;
diff --git a/src/render/program/heatmap_program.js b/src/render/program/heatmap_program.js
index 870f55d63e4..038aafd2915 100644
--- a/src/render/program/heatmap_program.js
+++ b/src/render/program/heatmap_program.js
@@ -14,9 +14,10 @@ import type Tile from '../../source/tile.js';
 import type {UniformValues, UniformLocations} from '../uniform_binding.js';
 import type Painter from '../painter.js';
 import type HeatmapStyleLayer from '../../style/style_layer/heatmap_style_layer.js';
-import type {OverscaledTileID} from '../../source/tile_id.js';
+import {CanonicalTileID, OverscaledTileID} from '../../source/tile_id.js';
 import {mat4} from 'gl-matrix';
 import {globeToMercatorTransition, globePixelsToTileUnits} from '../../geo/projection/globe_util.js';
+import EXTENT from '../../data/extent.js';
 
 export type HeatmapUniformsType = {|
     'u_extrude_scale': Uniform1f,
@@ -83,7 +84,9 @@ const heatmapUniformValues = (
         values['u_merc_center'] = mercatorCenter;
         values['u_tile_id'] = [coord.canonical.x, coord.canonical.y, 1 << coord.canonical.z];
         values['u_zoom_transition'] = globeToMercatorTransition(transform.zoom);
-        values['u_up_dir'] = (transform.projection.upVector(coord.canonical, mercatorCenter[0], mercatorCenter[1]): any);
+        const x = mercatorCenter[0] * EXTENT;
+        const y = mercatorCenter[1] * EXTENT;
+        values['u_up_dir'] = (transform.projection.upVector(new CanonicalTileID(0, 0, 0), x, y): any);
     }
 
     return values;
diff --git a/test/integration/render-tests/globe/globe-heatmap/near-transition/expected.png b/test/integration/render-tests/globe/globe-heatmap/near-transition/expected.png
index 2c97f0a9973..3bbbef13928 100644
Binary files a/test/integration/render-tests/globe/globe-heatmap/near-transition/expected.png and b/test/integration/render-tests/globe/globe-heatmap/near-transition/expected.png differ
diff --git a/test/integration/render-tests/regressions/mapbox-gl-js#11769/expected.png b/test/integration/render-tests/regressions/mapbox-gl-js#11769/expected.png
index 84feaf84749..4e37d114d53 100644
Binary files a/test/integration/render-tests/regressions/mapbox-gl-js#11769/expected.png and b/test/integration/render-tests/regressions/mapbox-gl-js#11769/expected.png differ