Overflow:Hidden Not Working as Expected in Google Chrome

Overflow hidden with border radius not working in chrome

Just position the wrapper element, and give it a z-index:

var wrapper = document.getElementsByClassName('wrapper')[0],  img = document.getElementsByTagName('img')[0];
/* Click anywhere in the bordered area to toggle img*/
wrapper.addEventListener('click', function() {  if (!img.className) {    img.className = 'hidden';  } else {    img.className = '';  }}, false);

.wrapper {  overflow: hidden;  border-radius: 60px;  border: 1px solid salmon;    /*Position and z-index*/  position: relative;  z-index: 1;}img {  width: 100%;  height: auto;  opacity: 1;  transition: opacity 1s ease;}.hidden {  opacity: 0;}

<div class="wrapper">  <img src="http://static.planetminecraft.com/files/resource_media/screenshot/1211/y-you-no-work_1687402.jpg"></div>

overflow:hidden on div in ordered list affects li, Chrome bug?

Well, this is a kind of a hack, but it works. Adding a pseudo :before-element brings back the list style, as the li will have some content now. Bring back the div to the top and it looks like nothing has changed.

CSS

ol > li:before {
    content: '';
    display: block;
    height: 1px;
}

div {
    margin-top: -1px;
}

Demo

Try before buy

Strange behavior of overflow: auto on Chrome

I found the solution to my problem. For some reason, for this to work in Chrome I had to add a position:relative rule to #content:

#content{
    position: relative;
    height: 200px;
    overflow:visible;
    border 1px solid red;
}

Overflow:hidden; retaining content width but hiding content: Chrome

What a nasty bug!

Need to research if further, but if you know the original width of .content, then you can add the same negative margin to it: http://jsfiddle.net/kizu/cpA3V/7/ — so it would compensate the original width. And if you'll need to animate the accordion, you'll just need to animate the margin alongside the width.

Bug with transform: scale and overflow: hidden in Chrome

It's a known bug in Webkit-based browsers - see #62363. You can add a border:1px solid transparent; to your .wrap class to workaround the problem.

For the updated requirement, adding a transition to an element with a border-radius, that's another known Chomre/Webkit bug #157218. Sorry but no known general workaround still, although one comment on that bug says that using the chrome://flags and using the --ignore-gpu-blacklist flag fixes it in Chrome 29 (which just hit the Chrome dev channel today).

clip-path not working as expected in Chrome (works in Firefox and Safari)

I decided to play a little with Javascript. I've changed a little the HTML and the CSS. The subchilds are positioned top: 150px;.

 function getY(element) {
     var rect = element.getBoundingClientRect();
     return rect.bottom;
 }

let container1 = document.querySelector(".container_1");
let container2 = document.querySelector(".container_2");
let container3 = document.querySelector(".container_3");

let subchild1 = document.querySelector(".container_1 .subchild");
let subchild2 = document.querySelector(".container_2 .subchild");
let subchild3 = document.querySelector(".container_3 .subchild");

document.addEventListener('scroll', function() {
    let bottom1 = getY(container1);
    let bottom2 = getY(container2);
    let bottom3 = getY(container3);
    
    if ((bottom1 > 166) && (bottom2 > 166) && (bottom3 > 166)) {
        subchild1.style.display = "block";
    }
    else {
        subchild1.style.display = "none";
    }
    //
    if ((bottom1 < 166) && (bottom2 > 166) && (bottom3 > 166)) {
        subchild2.style.display = "block";
    }
    else {
        subchild2.style.display = "none";
    }   
    //
    if ((bottom1 < 166) && (bottom2 < 166) && (bottom3 > 166)) {
        subchild3.style.display = "block";
    }
    else {
        subchild3.style.display = "none";
    }

});

* {
    padding: 0;
    margin: 0;
    border: none;
}
html {
    background-color: black;
}
.info {
    list-style-type: none;
    margin-left: 13vw;
    padding: 0;
    overflow: hidden;
    position: fixed;
    color: white;
    z-index: -1;
    top: 80vh;
}
.container {
    width: 100%;
    height: 110vh;
}
.parent {
    position: absolute;
    width: 100%;
    height: 110vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
    
}
.parent_1 {
    background-color: turquoise;
}
.parent_2 {
    background-color: tomato;
}
.parent_3 {
    background-color: purple;
}
.subchild {
    position: fixed;
    color: white;
    width: 60vw;
    left: 14vw; 
    top: 150px;
    
}
.container_1 .subchild {
    display: block;
}
.container_2 .subchild {
    display: none;
}
.container_3 .subchild {
    display: none;
}

<section class="container container_1">
        <Div class="parent parent_1">
            <Div class="child child_1">
                <p class="subchild">
                    First Title
                </p>
            </Div>
        </Div>
    </section>
    <section class="container container_2">
        <Div class="parent parent_2">
            <Div class="child child_2">
                <p class="subchild">
                    Second Title
                </p>
            </Div>
        </Div>
    </section>
    <section class="container container_3">
        <Div class="parent parent_3">
            <Div class="child child_3">
                <p class="subchild">
                    Third Title
                </p>
            </Div>
        </Div>
    </section>

---

Related Topics