Overflow-Y:Visible Not Working When Overflow-X:Hidden Is Present

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

After some serious searching it seems i've found the answer to my question:

from: http://www.brunildo.org/test/Overflowxy2.html

In Gecko, Safari, Opera, ‘visible’
becomes ‘auto’ also when combined with
‘hidden’ (in other words: ‘visible’
becomes ‘auto’ when combined with
anything else different from
‘visible’). Gecko 1.8, Safari 3, Opera
9.5 are pretty consistent among them.

also the W3C spec says:

The computed values of ‘overflow-x’
and ‘overflow-y’ are the same as their
specified values, except that some
combinations with ‘visible’ are not
possible: if one is specified as
‘visible’ and the other is ‘scroll’ or
‘auto’, then ‘visible’ is set to
‘auto’. The computed value of
‘overflow’ is equal to the computed
value of ‘overflow-x’ if ‘overflow-y’
is the same; otherwise it is the pair
of computed values of ‘overflow-x’ and
‘overflow-y’.

Short Version:

If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.

overflow-x: visible; doesn't work with overflow-y: auto; any workaround?

You cannot, that is written in the spec.

Have a look here : https://stackoverflow.com/a/6433475/1343096

Since it is written in the spec, I am 99% sure that it is impossible to do.

CSS overflow-x hidden and overflow-y visible

You can do this with CSS like this:

HTML:

<div class="wrapper">
    <div class="inner">
    </div>
</div>

CSS:

.wrapper{
    width: 400px;
    height: 300px;
}
.inner{
    max-width: 100%;
    overflow-x: hidden;
}

Now your .wrapper div will have overflow: visible; but your .inner div will never overflow because it has a maximum width of 100% of the wrapper div. Note that your wrapper must have an explicitly defined width.

Here is a working jsFiddle

overflow-x:hidden still can scroll

I don't think there's any way to prevent scrolling of an element without using JavaScript. With JS, though, it's pretty easy to set scrollLeft to 0 onscroll.

overflow-x: visible; overflow-y: auto; does not work - is this standards compliant?

Well, I will be damned, I decided to check what CSS(3) spec had to say about this, and it says:

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as
their specified values, except that some combinations with ‘visible’
are not possible: if one is specified as ‘visible’ and the other is
‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.

So, in short, yes, what I was experiencing was entirely the expected behavior.

Source: CSS basic box model W3C Working Draft 9 August 2007 (just after the example)

Span not responding to overflow-x: hidden

Your span isn't responding to overflow-x: hidden because there is nothing overflowing it, since it doesn't have any child element. In fact, the body is being overflowed by the span.

Therefore, you can add overflow-x: hidden to body, or if you don't want the circle exceeds your header in the Y axis (principally in smaller screens), add overflow: hidden to the header.

body {
  overflow-x: hidden;
}

.landing-page {
        height: 100vh;
        width: auto;
        position: relative;
        background-color: #32322C;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        color: rgb(203, 243, 241);
        z-index: 1;
        min-height: 500px;
        display: flex;
    }
    
    
    .circle {
        border-radius: 50%;
        background: linear-gradient(135deg, transparent 20%, #149279);
        position: absolute;
    }
    
    .circle.three {
        /* position: absolute; */
        width: 60em;
        height: 60em;
        right: -25%;
        z-index: 0;
    }
    
    #three-overflow {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
    }

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
<header class="landing-page" id="welcome-section">
        <div class="cover" onclick="closeNav();"></div>
        <svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="60" onclick="closeNav()">
            <path class="line top"
                d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" />
            <path class="line middle" d="m 30,50 h 40" />
            <path class="line bottom"
                d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" />
        </svg>
        <div class="top_contacts">
            <a href="https://github.com/ZMoberg" id="profile-link" class="top_contacts-link" target="_blank"
                alt="Github"><i class="fab fa-github"></i></a>
            <a href="https://www.linkedin.com/in/zackmoberg/" id="profile-link" class="top_contacts-link"
                target="_blank" alt="Linkedin"><i class="fab fa-linkedin"></i></a>
        </div>

        <!--Navigation bar-->
        <nav id="navbar" class="nav">
            <ul class="nav-links">
                <li class="nav-link"><a href="#about_scroll">ABOUT</a></li>
                <li class="nav-link"><a href="#projects-scroll">PROJECTS</a></li>
                <li class="nav-link"><a href="#contact">CONTACT</a></li>
            </ul>
        </nav>
        <span class="circle three" id="three-overflow"></span>
        <section class="head_sub">
            <h1 class="title">ZACK MOBERG</h1>
            <p class="title_sub">Web Developer & UI/UX Designer</p>
            <div class="header_nav">
                <ul>
                    <li class="title_nav"><a href="#about_scroll" class="left">ABOUT</a></li>
                    <li class="title_nav"><a href="#projects-scroll" class="left">PROJECTS</a></li>
                    <li class="title_nav"><a href="#contact" class="left">CONTACT</a></li>
                </ul>
            </div>
        </section>

        <!-- Scroll down animation -->

        <div class="mouse_scroll">
            <a href="#about_scroll">
                <div class="mouse">
                    <div class="wheel"></div>
                </div>
                <div class="scroll_arrows">
                    <span class="m_scroll_arrows unu"></span>
                    <span class="m_scroll_arrows doi"></span>
                    <span class="m_scroll_arrows trei"></span>
                </div>
            </a>
        </div>

    </header>
    </body>
</html>