I have used Mapbox inside hype in some projects before and I was able to fix this using some cheap hacks, but I am looking to fix it for good this time.
The problem is, that mapbox is having some trouble rendering the map inside a rectangle shape, the map is not filling the rectangle container until I resize the browser.
The way I have fixed it in the past is to make the rectangle change size using no more than 5 frames at the start, but I believe there should be a way to fix this that I am not seeing.
Turns out that the solution is indeed more simple that I thought:
I found this site:
And using the map.resize(); fixes the problem, but I am still open to any alternative. Meanwhile, this patches the problem.
The thing that doesn’t makes me completely happy using this, is that I have to use a TimeOut in order to work: setTimeout(function () { console.log("resize triggered"); map.resize(); }, 200);