codice:
<button class="primaryButton" onclick="showPopup()">Chi Siamo</button>


<div id = "popup1" class = "overlay" style='visibility:hidden'>
            <div class = "popup">
                <h2>Chi Siamo</h2>
                <a class = "close" onclick='closePopup()'>×</a>
                <div class = "content">
                   testo overlay
                </div>
            </div>
        </div>
<script>
function showPopup(){
 document.getElementById('popup1').setAttribute('style',' opacity:1; visibility:visible' );
     }

</script>

CSS: #popup1     {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: fixed;
        background: rgba(0, 0, 0, 0.7);
        transition: opacity 700ms;
        opacity: 0;
    }
Il "display block" non è una proprietà che può essere "mostrata parzialmente".
Un elemento ha un display block, oppure no. Non ci sono vie di mezzo.

Utilizza al suo posto la proprietà "visibility" (hidden/visible).