Mapbox GL JS markers go outside map - marker

Question

When the map loads, all of the burgers / markers are visible (I intentionally set the zoom to account for all the burgers in the area.) For some reason, when I pan around on the map or zoom in/out, the burgers / markers follow the pan and escape the map's bounds / edges. I tried using default markers and removing the script that programmatically adds popups to the markers. I'll post some relevant code here.
You can see that the burgers not only show up outside the map, but stretch the width of the window as they move.
HTML
<div class="content">
<div class="story-list"></div>
<div class="story-map">
<div class="story-map-container" id="story-map-container"></div>
</div>
</div>
CSS
.content {
padding: 6.5%;
width: 87%;
background-image: url("../media/images/temp-gradient-low.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* story-list */
.story-list {
display: inline-block;
position: relative;
width: 66%;
z-index: 1;
vertical-align: top;
font-size: 0;
padding-bottom: 1%;
}
/* story-map */
.story-map { /* using id='' in order to override the position set by mapbox*/
/*background-color: white;*/
display: inline-block;
position: sticky;
top: 0;
width: 33%;
height: 100vh;
/*padding-left: 2.5%;*/
z-index: 0;
vertical-align: top;
/*float: right;*/
}
#story-map-container {
background-color: lightgreen;
width: 100%;
/*margin-left: 2.5%;*/
height: 100%;
overflow: visible;
}
.mapboxgl-map {
position: absolute;
overflow: visible;
}
.mapboxgl-marker {
background-image: url("../media/icons/burger-marker.png");
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
}
JS
var map = null;
function initMapbox() {
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFua3NreSIsImEiOiJjanNmbTA0YWkwdWx5NDNtdG1idHpwNTE3In0.Y16huX7_p26tsDlcJTWWFQ';
map = new mapboxgl.Map({
container: 'story-map-container',
style: 'mapbox://styles/mapbox/streets-v11',
zoom: 10,
center: [-118.338604, 34.083480]
});
}
function parseStuff() {
const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
const list = Array.from({length: 10}, (x,i) => {
return {
name: 'The Burger Place',
address: '123 Yumyum Hwy',
coordinates: {lat: 34.083480 + Math.random() * 0.1, lng: -118.348604 + Math.random() * 0.1},
phoneNumber: '1-123-456-7890',
website: {
text: 'BURGERSITE',
url: 'http://google.com'
},
description: 'A happy place for people who eat meat.',
review: lorem.substring(0, lorem.length * 0.6)
};
});
console.log(list);
list.forEach((element, index) => {
var customMarker = document.createElement('div');
customMarker.className = 'mapboxgl-marker';
customMarker.onclick = (e) => {
map.panTo([element.coordinates.lng, element.coordinates.lat]);
window.location.hash = `burger-place-${index}`
};
var popupContent = `${element.name}<br />${element.phoneNumber}`
var marker = new mapboxgl.Marker(customMarker)
.setLngLat([element.coordinates.lng, element.coordinates.lat]);
marker.setPopup(new mapboxgl.Popup({ offset: 25 }).setHTML(popupContent))
.addTo(map);
})
$('.story-list').html(componentList);
}
window.onload = () => {
initMapbox();
parseStuff();
};

Answer 1

.story-map {
overflow: hidden;
//...
}
fixes your issues. Though I'm also somewhat confused as to why mapbox draws the markers beyond its canvas.