CSS transition not working in google chrome

Question

If I change the display property, the transition won't work (it happens instantly) in google chrome (version 50) but it works properly in Firefox (version 44) and IE (version 11).

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

CSS

.inner {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s linear 1s;
    display: inline-block;
}
.outer:hover .inner {
    width: 300px;
}
.outer:hover {
  display: inline-block; /* If I comment this, it will work */
}

You can see a demo here.

score 1 · Answer 1 · answered Apr 22 '16 at 14:11

1

Add left:0 to the base definition and you will be fine

answered Apr 22 '16 at 14:11

Malhar

21
2

It is not working, I tried `left:0` everywhere with and without `position: relative;` – a5hk Apr 22 '16 at 14:25
Thanks, but unfortunately it has a typo causing `display:inline-block;` invalid and thus `display` remains `block`. You have typed `,` after `left` instead of `;` – a5hk Apr 28 '16 at 04:47

0xdw · Answer 2 · 2016-04-22T14:10:09.333

0

Use display: block; instead of display: inline-block;

.inner {
  width: 100px;
  height: 100px;
  background: red;
  display: block;
}
.outer:hover .inner {
  width: 300px;
  -webkit-transition: width 2s linear;
  -moz-transition: width 2s linear;
  -o-transition: width 2s linear;
  transition: width 2s linear;
}
.outer:hover {
  display: block;
}

<div class="outer">
  <div class="inner">
  </div>
</div>

edited Apr 22 '16 at 14:10

answered Apr 22 '16 at 14:04

0xdw

3,755
2
25
40

It is like commenting the line, `display: block;` is default for `div` elements, I want to change it. – a5hk Apr 22 '16 at 14:17
If you add `.outer {display:inline-block)` (note the missing `:hover` pseudo selector) it resolves it as well. Is there a specific reason you are only changing the `display` property to `inline-block` when hovered? – Frits Apr 25 '16 at 05:52
@fritzypop, I was trying to scroll overflown text, like [this](https://jsfiddle.net/amyseqmedia/2gKZF/). But is uses fixed numbers for `left` property. Changing the `display` was supposed to allow the parent of the element to be automatically grown to the length of child element, then if was possible to use percentage for `left` property. Anyway I solved it using keyframes, got the idea from [here](http://stackoverflow.com/questions/3331353/transitions-on-the-display-property) and my solution for scrolling is [here](https://jsfiddle.net/Ashkan_/2q982juo/), for anyone interested. – a5hk Apr 28 '16 at 05:09

CSS transition not working in google chrome

2 Answers2