Chrome Does Not Re-Calculate Width When Height Changes

Chrome does not re-calculate width when height changes

My solution: Solution playground

The idea is to trick Chrome to re-calculate the width, by giving the image a new height that is almost the same on the li:hover state. BUT this isn't enough for Chrome. transitions must also be applied on the img. This is all voodoo coding, but this is the least-ugly solution I could come up with:

ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; }
  li{ display:inline-block; vertical-align:middle; height:60%; -webkit-transition:.2s; transition:.2s; }
  li:hover{ height:100%; }
    li a{ height:100%; padding:0 2px; display:block; }
    li a img{ height:96%; -webkit-transition:.2s; transition:.2s; }
    li:hover a img{ min-height:96%; }

Chrome does not re-calculate width when height changes

My solution: Solution playground

The idea is to trick Chrome to re-calculate the width, by giving the image a new height that is almost the same on the li:hover state. BUT this isn't enough for Chrome. transitions must also be applied on the img. This is all voodoo coding, but this is the least-ugly solution I could come up with:

ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; }
  li{ display:inline-block; vertical-align:middle; height:60%; -webkit-transition:.2s; transition:.2s; }
  li:hover{ height:100%; }
    li a{ height:100%; padding:0 2px; display:block; }
    li a img{ height:96%; -webkit-transition:.2s; transition:.2s; }
    li:hover a img{ min-height:96%; }

Chrome browser calculates the wrong element width

Found out that this is something to do with linebreaks / wordbreaks ...

So the first (raw) solution is to keep all the heading text in one line.

.project-info .item .heading {
  ...
  white-space: nowrap;
}

However I'm still looking for a proper answer to allow the heading text stack up in multiple lines.

Chrome doesn't update the element's width at some condition, is it a bug?

I believe this is a bug in WebKit. I filed WebKit bug 104872 for this.

Chrome does not show width and height of screen when inspecting the page with Inspect

As of May2016, Chrome has this functionality again.screen dimensions

Chrome not calculating column height correctly after JS resizing li elements in multicolumn div

This indeed seems to be a chrome bug:
https://code.google.com/p/chromium/issues/detail?id=297782

Here's the workaround I found, a little JS script which resets the CSS class, with a delay. Without the delay it won't work.

var cols = $(".multiColumn").css("-webkit-column-count");
$(".multiColumn").css("-webkit-column-count","1");
setTimeout( function(){
    $(".multiColumn").css("-webkit-column-count",cols);
},1);

Chrome does not showing width of screen as screen resize?

Just updated to Chrome 49 and learned that there is indeed a bug causing this issue.

CSS3 calc(100%-88px) not working in Chrome

The problem in the question was caused by the lack of space around the subtraction operator.

Note that the grammar requires spaces around binary ‘+’ and ‘-’
operators. The ‘*’ and ‘/’ operators do not require spaces.

https://www.w3.org/TR/css3-values/#calc-syntax

^{This article mentions that the spacing is necessary for unambiguous parsing.}

Bad: calc(100%-88px)

Good: calc(100% - 88px)

---

How do I know it is not recognizing it? Because of the strikethrough
and the yellow triangle icon next to the style rule in chrome dev
tools.

A property that is struck through when viewed in Chrome's developer tools may be valid but overridden; however, a property struck through and with a warning triangle icon next to it is invalid.

---

2022 Update - calc() is supported by all modern browsers in a wide variety of scenarios, though proper spacing is still required.

---

Related Topics