'window.moveTo() wont go futher than half my screen in firefox

I generate a window and then on an event I move that window

    popup = open("", 'popup', 'top=' + top + ', left=' + left + ', width=' + width + ',height=' + height + ',toolbar=no,scrollbars=no,resizable=yes');
    popup.moveTo(1440, 0);

If I set left to 1440 while opening the window, it appears in the corner of my screen, while when using the function moveTo it sets it in the middle of the screen, even if I increase the value. Is it because I have a retina screen, if so how can I fix it ? it only happens in Firefox

Edit, full code using tomer raitz template 

<button onclick="openWin()">Open "myWindow"</button>
<button onclick="moveWin()">Move "myWindow"</button>
<script type="text/javascript">
    function moveWin() {
        popup.moveTo(1400, 0);
        popup.focus();
    }

    function openWin() {
        let left = "0px"
        let top = "0px"
        let width = 200;
        let height = 200;
        popup = window.open("", '', `width=${width} height=${height} top=${top} left=${left}`, 'toolbar=no scrollbars=no resizable=yes');
    }
</script>

Result in safari Result in safari Result in firefox nightly enter image description here

javascripthtml


Solution 1:[1]

If you want the window to be in the middle of the screen you needed to calculate the screen size like this : 

<button onclick="openWin()">Open "myWindow"</button>
<button onclick="moveWin()">Move "myWindow"</button>

function moveWin() {
let screenWidth = 0
let screenHeight = 0;
if(window.outerWidth - window.innerWidth >0){
screenWidth = (window.innerWidth - popup.innerWidth) /2 
}
else{
screenWidth = (window.outerWidth - popup.innerWidth) /2 
}

screenHeight = (window.outerHeight - popup.innerHeight) /2 
  popup.moveBy(screenWidth, screenHeight);
  popup.focus();
}

function openWin(){
let left = "0px"
let top = "0px"
let width = 200;
let height = 200;
 popup = window.open("", '', `width=${width} height=${height} top=${top} left=${left}`,'toolbar=no scrollbars=no resizable=yes');
}

Solution 2:[2]

<!DOCTYPE html>
<html>

<body>

  <h2>NO moveTo() </h2>

  <button onclick="openWin(640,480)">Open "myWindow"</button>

  <script>
    function openWin(w, h) {
      let y = window.outerHeight / 2 + window.screenY - (h / 2)
      let x = window.outerWidth / 2 + window.screenX - (w / 2)
      popup = window.open("", '', `width=${w} height=${h} top=${y} left=${x}`, 'toolbar=no scrollbars=no resizable=yes');
    }
  </script>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tomer raitz
Solution 2 ESP

Related Questions