Geoserver WMS distortion when reprojecting on high zoom

I have a GeoServer WMS that I load in a Leaflet map (keeping the map default CRS 3857) as a L.tileLayer.wms. The problem is that when I zoom in on this tile layer, the pixels get deformed and appear split, as shown below in the image (First img: Leaflet-map CRS: 3857; Second img: QGIS project CRS 3857). The second image is my desire result.

(Leaflet)

(QGIS)

Minimal code needed for a reproducible example:

var map = new L.Map('leaflet', {
    center: [28.3300,-16.490740],
    zoom: 15
});


L.tileLayer.wms('http://sigred.oapn.es/geoserver/SistemaREMOTE_modis/wms?',{
    layers: "SistemaREMOTE_modis:ref_prod_media_resumen",
    transparent: true,
    format: 'image/png'
}).addTo(map);

I tried changing the CRS of the Leaflet map to 4326, but that didn’t work, and also that way my OSM basemap won’t place right.

Also If I visualize the WMS with OpenLayers from GeoServer it looks correctly (http://sigred.oapn.es/geoserver/SistemaREMOTE_modis/wms?service=WMS&version=1.1.0&request=GetMap&layers=SistemaREMOTE_modis:ref_prod_media_resumen&styles=&bbox=-965199.01397601,3190740.34917998,834315.241888609,4798237.84077302&width=768&height=686&srs=EPSG:25830&format=application/openlayers)

What I am doing wrong? Is there a way to solve this problem?