Leaflet drawing tiles disjointly

This sounds like a symptom of missing Leaflet CSS file, or incorrect version of that file.

As has been pointed out, this is solved by importing the CSS files.

Classically, you include the link to your CSS stylesheet in the head section of your document:

 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

Or, in my case, stumbling across this problem while adapting Vue CLI's Webpack template, by adding

import "leaflet/dist/leaflet.css";

into the main.js file.

---

The key lines of CSS appear to be these:

.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
    }

so knowing that you can insert them at whatever point in your project suits your style.