Add detect.cssfilters, fallback to opacity only on IE11/Edge

(re: #4711)

modules/renderer/background.js

@@ -9,11 +9,13 @@ import { geoExtent, geoMetersToOffset, geoOffsetToMeters} from '../geo';
 import { rendererBackgroundSource } from './background_source';
 import { rendererTileLayer } from './tile_layer';
 import { utilQsString, utilStringQs } from '../util';
+import { utilDetect } from '../util/detect';
 import { utilRebind } from '../util/rebind';
 
 
 export function rendererBackground(context) {
     var dispatch = d3_dispatch('change');
+    var detected = utilDetect();
     var baseLayer = rendererTileLayer(context).projection(context.projection);
     var _overlayLayers = [];
     var _backgroundSources = [];
@@ -24,20 +26,22 @@ export function rendererBackground(context) {
 
 
     function background(selection) {
-        var baseFilter = '';
 
-        if (_brightness !== 1) {
-            baseFilter += 'brightness(' + _brightness + ')';
-        }
-        if (_contrast !== 1) {
-            baseFilter += 'contrast(' + _contrast + ')';
-        }
-        if (_saturation !== 1) {
-            baseFilter += 'saturate(' + _saturation + ')';
-        }
-        if (_sharpness < 1) {  // gaussian blur
-            var blur = d3_interpolateNumber(0.5, 5)(1 - _sharpness);
-            baseFilter += 'blur(' + blur + 'px)';
+        var baseFilter = '';
+        if (detected.cssfilters) {
+            if (_brightness !== 1) {
+                baseFilter += 'brightness(' + _brightness + ')';
+            }
+            if (_contrast !== 1) {
+                baseFilter += 'contrast(' + _contrast + ')';
+            }
+            if (_saturation !== 1) {
+                baseFilter += 'saturate(' + _saturation + ')';
+            }
+            if (_sharpness < 1) {  // gaussian blur
+                var blur = d3_interpolateNumber(0.5, 5)(1 - _sharpness);
+                baseFilter += 'blur(' + blur + 'px)';
+            }
         }
 
         var base = selection.selectAll('.layer-background')
@@ -46,8 +50,13 @@ export function rendererBackground(context) {
         base = base.enter()
             .insert('div', '.layer-data')
             .attr('class', 'layer layer-background')
-            .merge(base)
-            .style('filter', baseFilter || null);
+            .merge(base);
+
+        if (detected.cssfilters) {
+            base.style('filter', baseFilter || null);
+        } else {
+            base.style('opacity', _brightness);
+        }
 
 
         var imagery = base.selectAll('.layer-imagery')
@@ -62,7 +71,7 @@ export function rendererBackground(context) {
 
         var maskFilter = '';
         var mixBlendMode = '';
-        if (_sharpness > 1) {  // apply unsharp mask
+        if (detected.cssfilters && _sharpness > 1) {  // apply unsharp mask
             mixBlendMode = 'overlay';
             maskFilter = 'saturate(0) blur(3px) invert(1)';
 
@@ -74,7 +83,7 @@ export function rendererBackground(context) {
         }
 
         var mask = base.selectAll('.layer-unsharp-mask')
-            .data(_sharpness > 1 ? [0] : []);
+            .data(detected.cssfilters && _sharpness > 1 ? [0] : []);
 
         mask.exit()
             .remove();

modules/ui/background_display_options.js

@@ -3,16 +3,21 @@ import {
     select as d3_select
 } from 'd3-selection';
 
-
 import { t, textDirection } from '../util/locale';
 import { svgIcon } from '../svg';
 import { uiDisclosure } from './disclosure';
+import { utilDetect } from '../util/detect';
 
 
 export function uiBackgroundDisplayOptions(context) {
-    var _selection = d3_select(null);
-    var sliders = ['brightness', 'contrast', 'saturation', 'sharpness'];
+    var detected = utilDetect();
     var storedOpacity = context.storage('background-opacity');
+    var minVal = 0.25;
+    var maxVal = detected.cssfilters ? 2 : 1;
+
+    var sliders = detected.cssfilters
+        ? ['brightness', 'contrast', 'saturation', 'sharpness']
+        : ['brightness'];
 
     var _options = {
         brightness: (storedOpacity !== null ? (+storedOpacity) : 1),
@@ -21,6 +26,8 @@ export function uiBackgroundDisplayOptions(context) {
         sharpness: 1
     };
 
+    var _selection = d3_select(null);
+
 
     function clamp(x, min, max) {
         return Math.max(min, Math.min(x, max));
@@ -32,7 +39,7 @@ export function uiBackgroundDisplayOptions(context) {
             val = d3_event.target.value;
         }
 
-        val = clamp(val, 0.25, 2);
+        val = clamp(val, minVal, maxVal);
 
         _options[d] = val;
         context.background()[d](val);
@@ -71,8 +78,8 @@ export function uiBackgroundDisplayOptions(context) {
             .append('input')
             .attr('class', function(d) { return 'display-option-input display-option-input-' + d; })
             .attr('type', 'range')
-            .attr('min', '0.25')
-            .attr('max', '2')
+            .attr('min', minVal)
+            .attr('max', maxVal)
             .attr('step', '0.05')
             .on('input', function(d) {
                 var val = d3_select(this).property('value');

modules/util/detect.js

@@ -112,6 +112,8 @@ export function utilDetect(force) {
 
     detected.download = !(detected.ie || detected.browser.toLowerCase() === 'edge');
 
+    detected.cssfilters = !(detected.ie || detected.browser.toLowerCase() === 'edge');
+
     function nav(x) {
         return navigator.userAgent.indexOf(x) !== -1;
     }