Map Tiles Show Gaps or Artifacts When Zooming

Updated on Sep 18, 2026

Environment

Product	Progress® KendoReact Map
Product Version	16.1.0

Description

KendoReact Map tiles show gaps, blank areas, or distorted regions while you zoom a MapTileLayer. The artifact can appear across the Map or at the edge of a tile group.

Cause

The Map renders the raster images returned by the configured tile provider. A failed or invalid tile response, a tileSize mismatch, CSS scaling, fractional dimensions, or the browser rendering environment can cause or expose visible artifacts.

Solution

Use the following checks to determine whether the issue originates with the tile provider, application CSS, or the browser rendering environment:

1. Open browser developer tools and inspect the network requests while zooming. Confirm that each tile request returns a successful response and a valid image. Record failed URLs, response status codes, and provider error messages.
2. Confirm that the tileSize prop matches the pixel dimensions returned by the tile provider. MapTileLayer uses 256 pixels by default.
3. Remove CSS transform, browser scaling, and fractional dimensions from the Map and its parent elements. Reproduce the issue in a container with whole-pixel dimensions.
4. Test the same page in another supported browser and a clean browser profile. Compare browser zoom, operating-system display scale, and GPU or hardware-acceleration settings.
5. Disable hardware acceleration only as an isolation test. Restart the browser and reproduce the issue. If the artifact disappears, record the browser version, graphics-driver information, and display scale.
6. Reproduce the issue with the same urlTemplate in a minimal React application.

If the issue persists, contact KendoReact support. Include the tile provider, KendoReact Map version, @progress/kendo-charts version, browser version, and affected URL pattern.

See Also

• Tile Layer
• Map Overview
• Map API Reference