Stable values in vertex shader, unstable in fragment when rendered with webgl

Question

I'm working with an unfamiliar scene and trying to render an array of points.

In the vertex shader i have this if/else block that resizes every 6th point and the last 3. This works as expected, points render at different sizes and as i navigate the scene they remain consistent.

However, when i run the same if/else tests in the fragment shader to color points differently it melts:

vert block:

  gl_PointSize = uPointSize;

  if(int(vIndex) == uTrajectoryCount - 1){
    gl_PointSize = uPointSize * 2.0;
  } 
  else if(int(vIndex) == uTrajectoryCount - 2){
    gl_PointSize = uPointSize * 1.6;
  }
  else if(int(vIndex) == uTrajectoryCount - 3){
    gl_PointSize = uPointSize * 1.3;
  }
  else if( 
    abs(mod(vIndex,6.0)) < 0.01 
  ) {
    gl_PointSize = uPointSize * 2.0;
  }

frag block

  if(int(vIndex) == uTrajectoryCount - 1){
    gl_FragColor = vec4(1.,0.,0.,1.);
  } 
  else if(int(vIndex) == uTrajectoryCount - 2){
    gl_FragColor = vec4(0.,1.,0.,1.);
  }
  else if(int(vIndex) == uTrajectoryCount - 3){
    gl_FragColor = vec4(0.,0.,1.,1.);
  }
  else if( 
    abs(mod(vIndex,6.0)) < 0.01 
  ) {
    gl_FragColor = vec4(1.,1.,0.,1.);
  }

What could i look for that would make this "stable" i expect the bigger points not to flicker and stay yellow, and the last three to be r g b.