Distant line-placed labels are illegible when top padding is large

[1ec5]

With certain combinations of aspect ratios, content insets, and pitch (tilt), distant line-placed labels toward the top of the map are scrunched up with insufficient pitch (letter spacing).

Illegible road labels from top to bottom: Linn St, Gest St, Plum St, Home Alley, Elm St, Race St, Central Ave, Vine St, Walnut St

Millbrook Dr, Cooper Rd, Este Ave, Vera Ave, Quatman Ave

W McMillan Ave, Warner St, Ravine St

Gest St, Egan Alley, Home Alley

Elsinore Ave, Celestial St, Monastery St, Eggleston Ave

Steps to reproduce

Apply this patch to iosapp and run on iPhone X:

diff --git a/platform/ios/app/MBXViewController.m b/platform/ios/app/MBXViewController.m
index 2fb95e1b17..29213f89b1 100644
--- a/platform/ios/app/MBXViewController.m
+++ b/platform/ios/app/MBXViewController.m
@@ -1958,7 +1958,7 @@ CLLocationCoordinate2D randomWorldCoordinate() {
     static dispatch_once_t onceToken;
     dispatch_once(&onceToken, ^{
         styleNames = @[
-            @"Streets",
+            @"Navigation Guidance Day",
             @"Outdoors",
             @"Light",
             @"Dark",
@@ -1966,7 +1966,7 @@ CLLocationCoordinate2D randomWorldCoordinate() {
             @"Satellite Streets",
         ];
         styleURLs = @[
-            [MGLStyle streetsStyleURL],
+            [NSURL URLWithString:@"mapbox://styles/mapbox/navigation-guidance-day-v4"],
             [MGLStyle outdoorsStyleURL],
             [MGLStyle lightStyleURL],
             [MGLStyle darkStyleURL],
@@ -2253,6 +2253,12 @@ CLLocationCoordinate2D randomWorldCoordinate() {
     // that a device with an English-language locale is already effectively
     // using locale-based country labels.
     _localizingLabels = [[self bestLanguageForUser] isEqualToString:@"en"];
+    
+    self.automaticallyAdjustsScrollViewInsets = NO;
+    self.mapView.contentInset = UIEdgeInsetsMake(CGRectGetHeight(self.mapView.bounds) * 0.6, 0, 0, 0);
+    MGLMapCamera *camera = [MGLMapCamera cameraLookingAtCenterCoordinate:CLLocationCoordinate2DMake(39.099392, -84.514483) altitude:196 pitch:60 heading:260];
+    UIEdgeInsets padding = UIEdgeInsetsMake(CGRectGetHeight(self.mapView.bounds) * 0, CGRectGetWidth(self.mapView.bounds) * 0, CGRectGetHeight(self.mapView.bounds) * 0, CGRectGetWidth(self.mapView.bounds) * 0);
+    [self.mapView setCamera:camera withDuration:0 animationTimingFunction:nil edgePadding:padding completionHandler:nil];
 }
 
 - (BOOL)mapView:(MGLMapView *)mapView shouldChangeFromCamera:(MGLMapCamera *)oldCamera toCamera:(MGLMapCamera *)newCamera {

Some styles like the Navigation Guidance Day v4 style seem to exacerbate the issue, but it can be observed in Streets too.

Diagnosis

This issue is most readily reproducible in tall views with a large top content inset. This can easily happen when the iOS navigation SDK runs on an iPhone X or on certain CarPlay units: mapbox/mapbox-navigation-ios#2184. The navigation SDK happens to apply a large top padding rather than a large top content inset when tracking the user’s location, in order to control the puck’s position, but the effect is the same.

On the surface, the issue would seem to be related to #15163. However, I think it’s actually that label size attenuation (mapbox/mapbox-gl-js#4547 mapbox/mapbox-gl-js#4781) doesn’t account for viewing distance (mapbox/mapbox-gl-js#5086), and the issue is exacerbated by the content inset, now that the map’s focal point is shifted lower.

Configuration

Mapbox SDK versions: v5.1.0 but not v5.0.0
iOS/macOS versions: iOS 12.2
Device/simulator models: CarPlay simulator with iPhone 8 simulator, iPhone X simulator
Xcode version: 10.2.1

/ref @mapbox/maps-ios @mapbox/gl-core @mapbox/navigation-ios @d-prukop

[astojilj]

GL JS parity is added

While porting the work to GL.JS, noticed that the issue with text placement doesn't exist with GL.JS.