Artefacts with mip maping example

http://www.illyriad.co.uk/3dDemo/Simon/artefact_testing/artefact_tracking.html

If you change the filter to include linear mip mapping artefacts appear. Any ideas why this might be? The vertex and frag shaders are pretty basic.

The texture can be seen here:
http://www.illyriad.co.uk/3dDemo/Simon/artefact_testing/models/textures/tiletesting.png
Each square is 128x128 and create a 256x256 multicolored quad. There are 8 quads across and 8 quads down. The sampling is supposed to only take place in the centre of each quad (a 128x128 area that takes 64x64 from each colored section of the quad).

I am trying to avoid having to create my own mip maps basically, but the artefacts that are appearing just dont make any sense to me. Getting light colors between two darker ones etc… Am I missing something obvious?

Basically this is with different texture and more complicated shaders but same problem this is what i am trying to get to work.
http://www.illyriad.co.uk/3dDemo/Simon/tile_testing/testingtiles.html

<script id="fragmentShader" type="text/shader">
  			precision highp float;
			uniform sampler2D uTileStrip;
			varying vec4 vUv;

			void main() {
				float mult=1.0/16.0;
				float offset=mult/2.0;
				float delta=1.0/4096.0;
				vec2 adjUv;
				adjUv.x=fract(vUv.x);
				adjUv.y=fract(vUv.y);
				adjUv*=mult;
				adjUv.x+=(offset+vUv.z)+delta;
				adjUv.y+=(offset+vUv.w)+delta;
				vec4 col=texture2D(uTileStrip,adjUv);
				gl_FragColor = vec4(col.rgb,1.0);	
			}
		</script>


		<script id="vertexShader" type="text/shader">
  			precision highp float;
			uniform vec4 uTextures;
			varying vec4 vUv;
			void main() {
				vec4 vPos=projectionMatrix * modelViewMatrix * vec4(position,1.0);
				vec2 vTexData=uTextures.xy;
				vUv=vec4(uv.x*uTextures.z,uv.y*uTextures.w,uTextures.xy); // multiply by the scaling factors
				gl_Position = vPos;
				    }
		</script>