[Bug]: Using a lizmap map as iframe inside bootstrap site: auto scroll to the iframe

rmarzocchi84 commented 1 year ago

What is the bug?

When I use a lizmap map on an iframe inside a bootsrap HTML page the page automatically scroll on the lizmap map.

Steps to reproduce the issue

Here a simple example of a webpage which use a lizmap map (for the test I use a demo map, but you can try with each lizmap map):

<html>

<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

</head>

<body>
<div id="wrapper">
<h2> TEST no js incluso - da iniettare </h2>

<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>

<iframe  id="openstreet-map1" name="openstreet-map1-name" src="https://demo.lizmap.com/lizmap/index.php/view/map/?repository=demo&project=Demo_plu"border="0" style="margin: 0px; padding: 0px; height: 694.156px; width: 100%; min-height: 320px; border: none; overflow: hidden;"></iframe>

</div>

</body>

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
</script>
</html>

Versions

Lizmap 3.5.X QGIS Server 3.22.X

Check Lizmap plugin

[x] I have done the step just before in the Lizmap QGIS desktop plugin before opening this ticket. Otherwise, my ticket is not considered valid and might get closed.

QGIS server version, only if the section above doesn't mention the QGIS Server version

No response

Operating system

Ubuntu 20.04

Browsers

Firefox, Chrome, Microsoft Edge

Browsers version

All recent versions

Relevant log output

No response

rmarzocchi84 commented 1 year ago

Can I do something else? It seems not related to this issue https://github.com/3liz/lizmap-web-client/issues/645

nworr commented 1 year ago

blind guess : some js events force the focus on the iframe, so the browser scroll to it

a solution can be made using custom js script, once the ui is loaded to force window.parent to scroll in top

 lizMap.events.on({ 

    uicreated: function(e) {
        window.parent.scrollTo(0,0);
    }
});

rmarzocchi84 commented 1 year ago

blind guess : some js events force the focus on the iframe, so the browser scroll to it

a solution can be made using custom js script, once the ui is loaded to force window.parent to scroll in top
 lizMap.events.on({ 

    uicreated: function(e) {
        window.parent.scrollTo(0,0);
    }
});   

It works but only for simple page.. I try also with widow.self.scrollTo(0,0); but it doesn't work

rmarzocchi84 commented 1 year ago

sorry @Gustry do you expect more feedbacks from me? The solution proposed by @nworr doesn't work very well

tportier commented 1 week ago

@rmarzocchi84 I'm facing the same problem. Did you find a solution ?

rmarzocchi84 commented 1 week ago

unfortunately no

3liz / lizmap-web-client