The CSS3 transition is not functioning correctly when transitioning element dimensions from a percentage or auto value to a specific pixel

As part of my project, I am developing a single-page website that features a vector graphic occupying 80% of the screen width on the initial 'start screen'. Once the user scrolls down, the graphic smoothly transitions into a navigation bar positioned at the top of the page with a height of 50px. To achieve this effect, I planned to use CSS3 transitions for animating the resizing process.

However, I encountered an issue where CSS transitions do not seem to work correctly when scaling an element from a percentage or auto value to a fixed pixel value and vice versa. I created a jsfiddle to showcase this problem. While the height transition of the div works as expected, the width does not animate properly.

Due to the necessity of maintaining responsive design principles, using pixel widths for the initial image size is not viable. Here is a snippet of the problematic code:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        html, body{
            background-color: #010101;
            height: 100%;
        }
        .navbar--logo-item{
            background-color: #fff;
            height: 10px;
            width: 80%
            -moz-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }
        .navbar--logo-item.small{
            height: 50px;
            width: 200px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#toggle').click(function(){
                $('.navbar--logo-item').toggleClass('small');
            });
        });
    </script>
</head>
<body>
    <div class="navbar--logo-item"></div>
    <button id="toggle">
        Toggle Logo
    </button>
</body>
</html>

Answer №1

To address this issue in modern web browsers, you can utilize the calc function.

If the calc value is consistent, transitioning it should not be a problem. You can rephrase your scenario in a consistent manner like this:

.navbar--logo-item{
    width: calc(80% + 0px);
}
.navbar--logo-item.small{
    width: calc(0% + 200px);
}

It's worth noting that both calc functions are similar (combining a percentage and pixel value), yet they yield the same outcome as what you currently have.

Check out the demo here

Another common approach to achieve this is by setting a max-width based on the highest potential original value, for instance:

.navbar--logo-item{
    width: auto;
    max-width: 1000px; /* an approximate value will suffice */
}
.navbar--logo-item.small{
    max-width: 200px;   /* no need to specify width */
}

Answer №2

To ensure a smooth transition for your logo, set its width to match that of its immediate parent element in pixels.

$(document).ready(function(){  
    var logo = $('.navbar--logo-item');
    
    function setWidthtoParent(target) {
        var parentWidth = target.parent().width();
        target.css('width', parentWidth);
    }
    
    setWidthtoParent(logo);
    
    $('#toggle').click(function(){
        logo.toggleClass('small');
    });
});
html, body{
  background-color: #010101;
  height: 100%;
}
.navbar--logo-item{
  background-color: #fff;
  height: 10px;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.navbar--logo-item.small{
  height: 50px;
  width: 200px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="navbar--logo-item"></div>
<button id="toggle">
Toggle Logo
</button>
</body>

However, using an !important declaration is not recommended, as it may lead to conflicts with inline styles and potential issues if the browser window is resized during the transition. A more effective approach would be to maintain consistent units, such as transitioning the width of a parent container while keeping the SVG at 100%, similar to this example.

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

The functionality of Bootstrap v4 push and pull grid classes seems to be failing to meet expectations

In the process of developing a web application, I am using Bootstrap v4 (alpha 3) to create a responsive layout. Most elements are working well, however, I am facing difficulties rearranging my cards using the push and pull classes in Bootstrap. The intend ...

different ways to dynamically increase CSS ID in PHP

Is there a way to dynamically increment my CSS ID using PHP? foreach ($query_cat->result() as $row_cat) { $row_cat_id = $row_cat->id; echo '<div class="product-wrapper">'; echo '<div id="product-header' . $r ...

How to center align text in the media-body using Bootstrap 4 Beta

Struggling to vertically align the text in media-body to the middle when using the new Bootstrap 4 beta version. Tried an approach mentioned in this solution, but it didn't work with the latest version of Bootstrap. Attempted using text-center and a ...

What methods can be used to conceal a div when the content is not being shown?

I'm a beginner in HTML and CSS and I have a page with the following code: Content displayed : <div id="row-3" ><!-- Row 3 starts here --> <div class="groupz_column1" style="margin-right:0px;"><a href="http://www.xyz.in/ads/ ...

Selecting menu items in React Material UI with various background colors using the RAL color selector component

Seeking a solution to create a component for selecting RAL colors using Material UI's TextField and MenuItem. Each item in the menu should have a background color reflecting the RAL color it represents. However, Material UI no longer supports inline s ...

Centered Fixed Upward Scrolling Div

Currently facing a challenge with my project involving a chat interface created in Angular. I am struggling with the CSS styling as the chat starts at the top and scrolls downward off-screen as the conversation progresses. Although I can scroll along with ...

Is Django_compressor concealing the CSS code?

I have implemented django_compressor in my project. This is how I set it up in my template : {% load compress %} {% compress css %} <link rel="stylesheet" href="/media/css/master.css" type="text/css" charset="utf-8"> {% endcompress %} In my setti ...

Zoom in to see the header spanning the entire width of the page

http://jsfiddle.net/CPSKa/ Whenever I zoom in on the header of my website, the line underneath it starts to shrink. Is there a way to prevent this from happening? Here is the HTML Code: <div id="main_header"> <div id="main_header_wrapper"&g ...

The opacity of the background should not impact the visibility of the image

I applied an opacity effect to the white background of each post with the following CSS: .post{ background: white; opacity: 0.75; border-radius: 0px 0px 6px 0px; } However, this opacity effect is also affecting the images in each post, which ...

Is there a way to display two cards side by side in mobile view?

On a desktop view, 2 cards are displayed in a row. I would like them to also appear in a row on mobile view. I tried using col-sm-4 but it's not working. How can I get the cards to display in a row on mobile view so that I can see both the product pho ...

Display every div element if none of the links have been clicked

On my webpage at url.com/yourfirstpage/, all div elements are hidden by default with a display:none property. If we specifically target #sec1 by going to url.com/yourfirstpage/#sec1, only sec1 is displayed while the others remain hidden. But what if we acc ...

Navbar collapse not functioning properly on HTML, CSS, and JavaScript

I have developed a CSS code snippet: .nav{ right: 0px; left: 0px; margin-top: 0px; margin-bottom:20px; height: 35px; text-align: center; background-color: red; z-index: 1; } .sticky { background: #000; text-align: center; ...

Having trouble implementing table row selection with semantic-ui table

I am currently in the process of adopting Semantic-UI, but I am encountering some issues. Specifically, I am struggling to make row selection work in a table. Below is the sample HTML I am using from Semantic-UI: <table class="ui selectable celled tab ...

What is the process for incorporating a full-page blog into a blog preview?

I customized a template, but there is a blog section within the div that I am struggling to replicate. Here is the test website for reference: Below is the HTML code for the blog section: <!-- Blog Start --> <section class="section bg ...

Ways to align three divs next to each other in an HTML structure?

I am currently working on a website layout that consists of three sections positioned horizontally. I am aiming for the left division to take up 25% of the width, the middle one to occupy 50% of the width, and the right division to fill 25% of the width so ...

TinyMCE removes the class attribute from the iframe element

I am trying to specify certain iframes by using a class attribute to adjust the width using CSS. The iframes I am working with are google maps embeds, similar to this one: <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0 ...

Various instances of the jQuery niceScroll plugin

I successfully set up jQuery niceScroll on the body, but now I want different themed scrollbars on one page. Below is my code snippet: Here is my fiddle: http://jsfiddle.net/JPA4R/135/ <script> $(document).ready(function () { $("body").niceScroll ...

having trouble with changing the button's background color via toggle

I've been experimenting with toggling the background color of a button, similar to how changing the margin works. For some reason, the margin toggles correctly but the button's color doesn't. <script> let myBtn = document.querySele ...

Draggable element with a centered margin of 0 auto

Encountering an issue with jQuery UI sortable/draggable where the element being dragged, when centered using margin:0 auto, starts dragging from the left side of the container instead of the center where it is positioned. Check out this demo to see the pr ...

The process of running npx create-react-app with a specific name suddenly halts at a particular stage

Throughout my experience, I have never encountered this particular issue with the reliable old create-react-app However, on this occasion, I decided to use npx create-react-app to initiate a new react app. Below is a screenshot depicting the progress o ...