I ran into a problem with using gl_FragCoord variable to access texels. The problem can be illustrated by following example:

First I render a textured quad into texture of size (W, H) where W and H are viewport width and height correspondingly. Then I draw another quad with lower left corner in (0, 0) and upper right corner in (W, H) (so that it effectively takes whole viewport) which is textured with this texture. Let's call it quad A. Then I draw another quad (let's call it quad B) on top of it, with lower left corner in (0, H1) and upper right in (W, H) and also use the same texture for it. The whole scene can be illustrated by this picture:

As you can see, the bottom part of the first quad lays in quad A and a top part in quad B. Thus when I experiment with fragment shader for quad B I can see whether the top part of the quad matches the bottom part.

Now to the problem:

When in fragment shader for quad B I use

gl_FragColor = texture2D(u_backgroundTexture, v_texCoord);

(v_texCoord is (0, 0) for lower left corner and (1, 1) for upper right)

to determine fragment color, everything is fine. Top and bottom parts of the first quad perfectly match each other:

However, when I change this line to:

gl_FragColor = texture2D(u_backgroundTexture, gl_FragCoord.xy / u_resolution);

(where u_resolution is a vec2(W, H))

the top and bottom parts of the quad doesn't match anymore. If I render that quad close to right edge of the screen I get following artifacts:

and if I draw it close to the left side artifacts looks like this:

Could anyone please explain what are the possible causes for such artifacts? Apparently I am missing some fundamental understanding of how texturing works, since in my mind texture2D(u_backgroundTexture, v_texCoord) should be completely equivalent to texture2D(u_backgroundTexture, gl_FragCoord.xy / u_resolution); in my case.

P.S. Obviously, for quad A I always use gl_FragColor = texture2D(u_backgroundTexture, v_texCoord) in fragment shader.