WebGL textureCubeLod causes seams on chrome/safari and not on ios

Question

I'm working on the Image Based Lighting portion of a PBR shader in three.js. I'm using a .dds cubemap texture, brought in through DDSLoader.

I'm getting terrible seams in the lower lods on chrome and safari. The wild part is that the material looks great on ios.

I have tried using all the mag and min filters, but to no success. I've also tried lowering the precision but that had no effect either. I'm thinking that ios may have a way of dealing with textures that is different from desktop. The lower lods look as if they are not being filtered properly and the seam gets more and more dramatic the lower the detail.

Below is a link to a codepen that illustrates the seams as they become more visible from LOD 0.0 on the left to to LOD 7.0 on the right.

var container;
var camera, controls, scene, renderer;
var material = [];

init();
animate();

function init() {

    // renderer

    renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha:  false,
      precision:  "highp"
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.autoClear = true;
    renderer.setClearColor(0x777777, 1);

    container = document.getElementById('world');
    container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;
    controls.minDistance = 100;
    controls.maxDistance = 4000;

    controls.enableDamping = true;
    controls.dampingFactor = 0.2;

    controls.keys = [65, 83, 68]; 

    // world

    scene = new THREE.Scene();

    var loader = new THREE.DDSLoader();
    var src = 'https://threejs.org/examples/textures/compressed/Mountains_argb_mip.dds'
    loader.load( src, function( texture ) {

      var geo = new THREE.SphereGeometry( 30, 48, 48 );

      for ( var i = 0; i < 8; i++ ) {
        createSphere( i, ( -280 + ( i * 80 ) ) );
      }

      function createSphere( index, pos ) {

        var uniforms = {
          envMap: { type: 't', value: null },
          lod: { type: '1f', value: 0.0 }
        };

        uniforms.envMap.value = texture;
        uniforms.lod.value = index;

        material[ index ] = new THREE.RawShaderMaterial({
          uniforms: uniforms,
          vertexShader: document.getElementById( 'vertexShader' ).textContent,
          fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
          lights: false
        });

        material[ index ].extensions.shaderTextureLOD = true;

        var Mesh = new THREE.Mesh( geo, material[ index ] );
        Mesh.position.x = pos;
        scene.add(Mesh);

        material[ index ].needsUpdate = true;

      };

    });

    window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

    render();
    controls.update();
    requestAnimationFrame(animate);

}

function render() {

    renderer.render(scene, camera);

}

textureCubeLod with .dds

Please try it on desktop chrome or safari and then compare to ios. (firefox and android do not support the textureCubeLodEXT).

I want to know what to do to make this work on chrome and safari for desktop. Are there different default filters for ios? What is ios doing or not doing to give me they results I'm looking for?

NOTE: .dds texture was saved 8 bits per channel and four channels.