Draggable map transforms on initialisation

[shy_seagull]

Hi!

I am working on a map-like showcase site which the user should navigate by dragging along with the mouse. It is working as I expected it to, but before I initially click on the draggable div, it has a different scale for some reason and then transforms back to the actual size, once I first click or drag.

As shown in the codepen demo.

I’m sorry if that’s a known issue, but I couldn’t find anything in the forum yet.

See the Pen QWNNYXY by lkssmnt (@lkssmnt) on CodePen

[PointC]

You need to set your .map to position relative since the divs are children of that element and absolutely positioned.

 

.map {
    width: 2500px;
    height: 1500px;
    background-color: grey;
    position: relative;
}

Happy tweening.

 

[shy_seagull]

I thought I would be something as easy as that. Thank you so much!