Overlay sobre una imagen con Bootstrap 4

Hola, estoy realizando mi web con Bootstrap 4.1.3 y tengo un pequeño problema al crear un overlay sobre una imagen y es que en su altura se generan unos pixeles demás. Lo he testeado en Firefox, Chrome y Edge con el mismo resultado.

Podeis verlo aquí en la primera respuesta. Correr el snippet y darle a full page para apreciar como en la altura se añaden esos pixeles extras.

¿A qué se debe, alguna solución?

Gracias ;-)