Fix right panel on Safari browser (overflow: auto + position: fixed)

See: https://stackoverflow.com/q/26704903

 map.css

@@ -33,17 +33,17 @@
.panel {
    opacity: .85;
    color: black;
    padding: 0;
    background: white;
    padding: 5px;
    border-left: 1px solid black;
    font-size: 14px;
    overflow-y: auto;
    
    transition: right .4s, width .4s;
    
    height: 100%;
    width: 360px;
    position: fixed;
    width: 350px;
    right: -365px;
    right: -361px;
    top: 0;
    bottom: 0;
}
@@ -52,10 +52,6 @@
}
.panel .hide {
    display: none;
    padding: 0px 1em;
}
.panel.enabled .hide {
    display: block;
    
    position: fixed;
    bottom: 20%;
@@ -72,10 +68,18 @@
    
    transition: right .4s, margin-right .4s;
}
.panel.enabled .hide {
    display: block;
}
.panel.expanded .hide {
    right: 360px;
}

.panel .panel-container {
    overflow-y: auto;
    box-sizing: border-box;
    padding: 5px;
    height: 100%;
}
@media (max-width: 600px) {
    .panel {
        width: 80%;
@@ -87,7 +91,6 @@
    
    .panel.enabled.expanded .hide {
        right: 80%;
        margin-right: 10px;
    }
}
.panel .type {

 map.js

@@ -87,17 +87,22 @@
    this._hide.className = 'hide';
    this._hide.addEventListener('click', this.toggleExpanded.bind(this));
    
    this._close = addElementWithText(this._element, 'a', '×');
    this._container = document.createElement('div');
    this._container.className = 'panel-container';
	
    this._close = addElementWithText(this._container, 'a', '×');
    this._close.title = lang.action_close;
    this._close.className = 'close';
    this._close.addEventListener('click', this.close.bind(this));
    
    this._content = document.createElement('div');
    this._element.appendChild(this._content);
    this._container.appendChild(this._content);
    this._element.appendChild(this._container);
}
Panel.prototype = {
    _element: null,
    _hide: null,
    _container: null,
    _close: null,
    _content: null,