Strange tile layer behavior while zooming on Safari

Question

I used https://www.maptiler.com/ 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.

Here's a gif:

My code is very simple:

   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);

I am using the latest version of Leaflet. I have tried downgrading to the previous version.

* Answers to comments *

Here is a "discolored" tile:

And here it is when I access directly through Safari. Its colors are correct.

Also, this is not happening on Safari on my Macbook Pro. Only on my iMac (Safari 11.1.2)