Unexpected behavior observed with transitioned elements in Overflow Hidden

While experimenting with jsfiddle, I stumbled upon an interesting issue.

Note: Run the snippet in full-screen mode (it's not responsive yet).

$('.box').click(function () {
    $('.box').toggleClass("init");
});
html {
     margin:0;
     padding:0;
     height:100vh;
     background:#222;
     color: cornflowerblue;
     overflow-x:hidden;
     font-size:18px;
 }
... (CSS code continues)
... (HTML code snippet continues)

The main issue lies with the overflow property that is set on the parent 'box' div - it does not contain the 'minibox' divs even though the overflow is set to hidden on the parent element.

This problem arises from:

 .minibox {
     height:48%;
     width:48%;
     position:absolute;
     background:gray;
     transition:all 0.8s; <- this declaration
 }

By removing this line, the issue resolves (although without the smooth transition effect intended). However, the reason behind this behavior remains unclear to me.

Upon hover, the elements initially appear as squares for a brief moment before transitioning into circles as expected.

Any suggestions on how to address this overflow issue?

cssgoogle-chromeoverflow

Answer №1

This issue can easily be resolved using the null transform technique. For more details, refer to this specific query.

$('.box').click(function () {
    $('.box').toggleClass("init");
});
html {
     margin:0;
     padding:0;
     height:100vh;
     background:#222;
     color: cornflowerblue;
     overflow-x:hidden;
     font-size:18px;
 }
 .box {
     height:100px;
     width:100px;
     background:rgba(0, 0, 0, 0.2);
     position:absolute;
     top:50%;
     left:50%;
     border-radius:50%;
     overflow:hidden;
     display:inline-block;
     transition:all 1.4s 1.4s;
     transform:translateZ(0);
 }
 .minibox {
     height:48%;
     width:48%;
     position:absolute;
     background:gray;
     transition:all 0.8s;
 }
 .box:hover .minibox {
     transform:rotate(45deg);
 }
 .mini1 {
     top:0;
     left:0;
 }
 .mini2 {
     top:0;
     right:0;
 }
 .mini3 {
     bottom:0;
     left:0;
 }
 .mini4 {
     bottom:0;
     right:0;
 }
 .circ {
     position:absolute;
     height:80%;
     width:80%;
     top:10%;
     left:10%;
     border-radius:50%;
     background:black;
     line-height:80px;
     text-align:center;
 }
 .box2 {
     top:38%;
     left:40%;
     transition:all 0.8s 2s;
 }
 .box3 {
     top:38%;
     left:60%;
     transition:all 0.8s 1.2s;
 }
 .box5 {
     top:38%;
     left:20%;
     transition:all 0.8s 1.8s;
 }
 .box4 {
     top:50%;
     left:30%;
     transition:all 0.8s 1.6s;
 }
 .box6 {
     top:25%;
     left:50%;
     transition:all 0.8s 1s;
 }
 .box7 {
     top:25%;
     left:30%;
 }
 .init {
     top:0;
     left:0;
     transition:all 0.5s
 }
 .init:before {
     content:"Menu";
     text-align:center;
     line-height:80px;
     background:red;
     position:absolute;
     z-index:8;
     height:80%;
     width:80%;
     border-radius:50%;
     top:10%;
     left:10%;
     background:blue;
 }
 .box:hover .minibox {
     background:red;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">4</div>
</div>
<div class="box box2 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">7</div>
</div>
<div class="box box3 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">3</div>
</div>
<div class="box box4 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">5</div>
</div>
<div class="box box5 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">6</div>
</div>
<div class="box box6 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">2</div>
</div>
<div class="box box7 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">1</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Replacing default hover behavior from an external library

Currently, I am utilizing a JS library that comes with a specific widget. Basically, I have the following list (I removed unnecessary DOM code): <li class="disabled"> When I hover over this list item, it turns into: <li class="disabled state-a ...

javascriptcss

The color of the menu background is not displaying correctly

My CSS3 navigation menu is not displaying the red background. I have checked my code multiple times but can't seem to find the issue. #nav{ background-color:red; height:40px; width: 550px; } ul { list-style-type: none; margin: 0; padding: 0; font-siz ...

jqueryhtmlcss

Tips for positioning footer text to the left and right, similar to Google's style

Explore www.google.com for inspiration. You will notice a footer containing links to Advertising, Business, and About on the left side, and Privacy, Settings, Terms, etc. on the right side at the bottom of the page. I am an aspiring developer attempting ...

htmlcss

The integration of ag-grid webpack css is not reflecting on the website as intended

I'm facing an issue with ag-grid in my react application where I can't seem to get the CSS working properly with webpack. The grid is currently displaying like this: image: https://i.sstatic.net/RPKvH.png const path = require("path"); var webp ...

cssreactjswebpackag-gridag-grid-react

Having trouble dealing with certificate OS pop-ups in Selenium using Python? I attempted to use pyAutoGUI, but unfortunately, it was not successful

Working with Selenium in Python to navigate on Google Chrome has been a smooth process until an SSL certificate popup appeared. Despite having a valid certificate and simply needing to press 'Ok', it seems that this particular popup is not browse ...

pythonseleniumgoogle-chromecertificate

By default, the sidebar is open on desktop devices while closed on mobile devices

I am struggling to figure out how to set my sidebar/navigation content, using Bootstrap, to be expanded by default on desktop and closed by default on mobile with the icon only showing on mobile devices. Despite multiple attempts, I cannot seem to make thi ...

javascripthtmlcssbootstrap-4responsive-design

The horizontal display of images is currently experiencing issues

I am having trouble displaying images horizontally in a row. I am aiming to show 8 images next to each other, but my current grid system setup is not achieving this. The images are currently stacked on top of each other, but I want them to be aligned horiz ...

csstwitter-bootstraptwitter-bootstrap-3

Is there a way to move the bootstrap carousel item captions outside of the image without having to set a specific height for the carousel manually?

<div id="carouselExampleIndicators" className="carousel slide" data-bs-ride="true"> <div className="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active" ...

cssbootstrap-5

Glitches in the fluid design of ie7

After creating a prototype layout for my latest design, I noticed that resizing the window in ie7 causes the content area to drop below the sidebar. This issue doesn't occur in other browsers, including ie6. Check out the demo here I need help ident ...

htmlinternet-explorer-7fluidcss

Enhancing Next.js with custom CSS for React-Bootstrap components: A step-by-step guide

After installing the react-bootstrap module using the pm command and importing it into my _app.js file, I encountered an issue when trying to modify the Bootstrap code for my navbar component. The code snippet provided below showcases the navbar component: ...

cssreactjsnext.jsreact-bootstrap

Using CSS to create a transition effect for fading in and out background images

I created a website with a captivating full-page background image (img/bg_start.jpg): If you hover your mouse over the central animal on the page, the current image (img/bg_start.jpg) will fade out and be replaced with another picture (img/bg_start2.jpg) ...

javascriptjquerycss

The issue with the page width is occurring due to a bug related to the

When pages contain the AddThis code, they tend to become very wide due to the code itself, resulting in a horizontal scroll bar appearing. However, by removing the code or changing the page direction to LTR, the issue is resolved and the page width return ...

htmlcssaddthis

Unpredictable hue of text

Is it possible to fill text with a combination of 2-3 random colors? ...

javascriptcssrandom

Bootstrap card restricting ul tag from occupying full width

Utilizing Bootstrap in my WordPress site, I employed the bootstrap grid system to split the page contents into two sections, one of which includes a card acting as a navigation menu. However, the <ul> element is failing to expand to full width. Wit ...

htmlcsswordpressbootstrap-4

Is there a way to create a blurred background effect while the popup is in use?

I prefer my popup to have a dark or blurred background when active. The popup itself should remain the same, with only the background being darkened. I would like a dark layer overlaying the entire page. This script should be compatible with any website wh ...

javascriptcss

Using Tailwind CSS to center a NexJS <Image /> component within a modal

In an effort to style my MapBoxGL popup content, I am working on aligning the text above the image to the left and centering the image below within the popup. As shown in the image below, this is currently proving to be a challenge as I transition from usi ...

cssreactjsnext.jstailwind-cssnext-images

Is it possible to adjust the positioning of this navigation style?

Discover a unique collection of navigation styles by following this link: http://tympanus.net/Development/ArrowNavigationStyles/ Be sure to explore the final style "Fill Path" at the end of the page. I'm interested in adjusting the position of the ...

htmlcss

Adjust canvas size based on chosen option

While experimenting with canvas, I had an interesting idea about altering the dimensions of a cube. Using HTML5 Canvas, I created a representation of a cube consisting of two squares connected by lines to form a 3D shape. My goal is to have the ability to ...

javascriptcsshtmlcanvas

What is the best method for starting a string using the symbol '~'?

Hello everyone! I have a task that requires me to add a special feature. The user needs to enter something in a field, and if it starts with the tilde (~), all subsequent entries should be enclosed in a frame within the same field or displayed in a list ...

javascripthtmlcssstroke

PHP quiz with results displayed in an aligned manner

I created a html quiz with php as my back-end. Everything is working correctly, but I'm having trouble centering the results on the page. Currently, they are aligned to the left. Can someone provide guidance on how to achieve this? This is my first ti ...

phphtmlcss