When utilizing CSS Animation in Bootstrap 5 collapse, the margin-collapse feature is deactivated, resulting in a choppy animation effect

Unique Example with CSS Snippet

Here's a straightforward example along with some CSS:

.mynav {
  margin-top: 36px;
}

li {
  margin: 18px 0;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b1914140f080f091a0b3b4e554b554b56191e0f1a4a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cba9a4a4bfb8bfb9aabb8bfee5fbe5fbe6a9aebfaafa">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<button data-bs-toggle="collapse" data-bs-target="#collapseNav" aria-expanded="false" aria-controls="collapseNav">
    BURGER
</button>
<ul class="mynav navigation collapse show" id="collapseNav" style="">
  <li>
    a
  </li>
  <li>
    b
  </li>
  <li>
    c
  </li>
  <li>
    d
  </li>
  <li>
    e
  </li>
</ul>

The Issue at Hand

While animating, notice how the top margins of ul and li are no longer collapsing as expected.

Is this intentional behavior? What can be done to overcome this? Could there potentially be a bug in bootstrap 5 causing this?

Update: Solution Found

To resolve this issue, it seems necessary to place all collapsible elements within a wrapper-container. The reason behind this requirement remains unclear to me.

One additional problem arises from this solution: The container may not be an HTML custom element. I suspect this might be a bug. As a result, I have submitted a bug report here: https://github.com/twbs/bootstrap/issues/32828 Nevertheless, this is just a minor observation.

cssbootstrap-5

Answer №1

Here's the explanation:

During animation, Bootstrap switches the overflow property from visible to hidden. This change introduces a new block formatting context. In a block formatting context, the outermost element does not experience margin collapse. As a result of this animation, the margins no longer collapse and the list begins to jitter.

Resolution:

  1. Avoid margin collapse.

or

  1. Include a wrapping container and animate that container instead.

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

What is the best way to ensure that the child element of a Material UI TableCell Component occupies the full height of the cell?

I am currently using MUI version 5 to create a table. In this table, there are two columns with cells that contain multiline TextFields. My goal is to have the TextFields completely fill the cell area. However, I am encountering an issue where when I start ...

cssreactjsmaterial-ui

The headline is being improperly rendered inside a black box on Firefox

A while back, I inquired about creating a black box with padding around a two-line headline. The solution worked well, except for older versions of Internet Explorer. However, in Firefox, there are occasional issues with the display looking jagged. This oc ...

cssfirefoxpaddinghtml

Ways to align the contents of a div in the center

Looking at the content in this div, it seems that the top is positioned higher than the bottom. Can anyone provide some guidance on how to fix this? .dtestContactDet{ border-bottom:1px solid #D7D7DE; border-bottom:1px solid #D7D7DE ; -khtml-border-bo ...

css

Is the hero image overlapping the text and logo?

I'm completely new to coding and I can't figure out why the hero image is covering up all the other content, even with z-index in place. Here is how the webpage should appear, but unfortunately, the hero image is hiding the logo, top navigation ...

htmlcsscss-floatcss-positionz-index

What is the best way to eliminate the extra space above a span when the parent element's font size is very large?

Dealing with a situation where the parent DOM-element has a large em-value which results in all inline child elements having a significant margin above them despite their smaller font-size: Here is the source (http://jsfiddle.net/rapik/w87m7/2/): <div ...

htmlcssfont-size

When attempting to click on the dropdown in Bootstrap, there is no content displayed

I am currently practicing Bootstrap and focusing on implementing Dropdowns. However, I am facing an issue where upon clicking the Dropdown button, nothing appears on the screen. Preview when it's not clicked Preview when it's clicked Here is m ...

javascripthtmlcssbootstrap-5

The text appears in the header instead of a separate section in Bootstrap 4

I am facing an issue with my one-page website where the new text section appears in the header video instead of after it. Can someone point out what I might be doing wrong? Here is my HTML: <header> <div class="container"> <div class="bg ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to align text with a certain element and ensure that it remains in place regardless of the screen size?

I need the word "social" to remain in line with the black bars, both on regular devices and mobiles. Although in bootstrap/html it may not align perfectly, it still stays close to the black bars. See example here Here is the code. Even though I can adjus ...

htmlcssbootstrap-4

I attempted to make a footer stick to the bottom of the page, but unfortunately, it does not seem to

This is a preview of my page: https://i.sstatic.net/7uLH9.png I attempted to apply position: relative to my PageContainer but the footer remains in place. How can I resolve this issue? Below is the code from App.js: const PageContainer = styled.div` p ...

cssreactjsstyled-components

I am having trouble getting my Wordpress theme to switch to RTL while using the qTranslate plugin

I have integrated the qTranslate plugin from WordPress, enabling me to translate posts and fields with ease. The primary language is English, while the secondary language is Arabic, requiring a design that supports RTL. After consulting both their FAQ an ...

htmlcsswordpress

In certain instances, content spills beyond the boundaries of a div element in Chrome 43

In my design, I have a purple block that contains text of varying lengths. The block is responsive and its width is set in percentage. Some users using Chrome (v43.0.2357.65) on Windows XP are experiencing issues where the text overflows beyond the edge o ...

htmlcsscross-browser

Using CSS to overlay text on an image on a webpage

Can anyone help me with this puzzling scenario? <TD><a href="index-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/m21.jpg',1)">Home</a><img src="images/m2.jpg" nam ...

cssweb

Analyzing the styles of :hover/:focus elements provided by the user agent in Chrome and Firefox

While inspecting a webpage, I can see the :focus/:hover behavior for every browser, but I am unable to view it in the inspect styles section. When I examine an input field or any other focusable element, and toggle the :focus checkbox, I notice that the d ...

cssgoogle-chromefirefoxgoogle-chrome-devtoolsfirefox-developer-tools

Is it possible to make side elements expand to occupy the remaining screen space beyond the container?

This is what it's supposed to look like: The goal here is to have the red element on the left expand to fill the remaining space beside its content, as well as the grey on the right. I am utilizing bootstrap which means the center elements occupy 117 ...

htmlcsstwitter-bootstrap

Is there a method to give a webpage a subtle shimmering effect without utilizing CSS box-shadow?

Struggling to Develop a High-Performance Interface Feature I'm currently facing a challenge in coding an interface that requires a subtle and broad glow effect, similar to the example provided below: https://i.sstatic.net/E4ilD.jpg Exploration of ...

javascripthtmlcssdomcanvas

Identifying the presence of a CSS class in order to add styling to a different element

Looking for help with CSS: /* targeting laptops */ @media only screen and (pointer:fine) and (max-device-height: 620px) { #root:has(.projects) ~ body { overflow: auto; /* allow scrolling */ } } My desired outcome is to set overflow: auto o ...

javascripthtmlcssreactjs

Color schemes for items in the Windows store app

I'm having trouble changing the background color of an item in my split application. I've tried using CSS, but nothing seems to work. Here is the template for the item (default style): <div class="itemtemplate" data-win-control="WinJS.Bindin ...

javascripthtmlcsswindows-runtimewindows-store-apps

What is the best way to apply fill to SVG using Tailwind CSS?

I tried using the code provided, but unfortunately, I was unable to Override the fill. The issue seems to have been resolved, but can someone help me achieve this using tailwind CSS? <div className=""> <svg className="text- ...

cssnext.jstailwind-csstailwind-in-js

Using the -webkit-box-reflect property along with the CSS position:absolute styling

Running on the Chrome Canary build, I have come across this HTML code snippet: <div id="debug" class="debug" >TEST</div> Additionally, here is the CSS code snippet: -webkit-box-reflect: below 0px -webkit-gradient(linear, ...

webkitcss

The alignment and sizing issues with stacking icons using fontawesome are still unresolved

I have been exploring the use of stacked icons with fontawesome, following a helpful blog post by Dave Gandy. Although stacking is working well, I am facing an issue aligning a stacked icon with a non-stacked icon (which is fa-5x). It's challenging t ...

cssfont-awesome