I have managed to fix the issue by moving the marker layer down 25 pixels.
This is the distance between the bottom of the marker span (background image) and marker icon. It now aligns correctly :)
You need to ensure you know the exact marker layer div within the scroll container
For example if your layer is the first child:
if (navigator.userAgent.match(/(iPhone|iPod|iPad)/i)) {
// KendoUI Map Fix
// Move all of the markers down 25 pixels - only on IOS devices
$('.k-layer').first().css('top', '25px');
}
Alternatively if you have many layers you can target the specific layer with nth-child
e.g.
// Target 5th Child map layer
$('.km-scroll-container .k-layer:nth-child(5)').css('top', '25px');
Cheers