title: Strange tile layer behavior while zooming on Safari
body: <p>I used <a href="https://www.maptiler.com/" rel="nofollow noreferrer">https://www.maptiler.com/</a> to generate a tile layer and I am self-hosting it. It works fine on all browsers except Safari. On Safari, the colors in the tile layer change when the map is zoomed.</p>
  
  <p>Here's a gif:</p>
  
  <p><a href="https://i.stack.imgur.com/LzX5c.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LzX5c.gif" alt="Visualization of the layer being altered during zoom"></a></p>
  
  <p>My code is very simple:</p>
  
  <pre><code>   var habitats = L.tileLayer('/layers/habitats/{z}/{x}/{y}.png', {
          bounds:  [[-57.1764,-169.4],[83.6236,-10.7]],
        });
  
     // Initialize map
      var map = L.map('tracking-map', {
        center: [8.546673, -80.012051],
        // zoom: 3,
        layers: [ersiMap] // default layer the map will load with
      });
  
      var baseMaps = {
        // "Streets": streetMap,
        "Satellite": ersiMap,
        "Political": outdoorMap,
      };
  
      var overlayMaps = {
        "Habitats": habitats,
        "Agriculture": agriculture,
      };
  
      // Create layer control thing
      L.control.layers(baseMaps, overlayMaps).addTo(map);
  </code></pre>
  
  <p>I am using the latest version of Leaflet. I have tried downgrading to the previous version.</p>
  
  <p><strong>* Answers to comments *</strong></p>
  
  <p>Here is a "discolored" tile:</p>
  
  <p><a href="https://i.stack.imgur.com/MKyTd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MKyTd.png" alt="Discolored Tile"></a></p>
  
  <p>And here it is when I access directly through Safari. Its colors are correct.</p>
  
  <p><a href="https://i.stack.imgur.com/D0iOU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D0iOU.png" alt="Normal tile when accessed directly through Safari"></a></p>
  
  <p>Also, this is not happening on Safari on my Macbook Pro. Only on my iMac (Safari 11.1.2)</p>