I have a simple html where I want the flexibility element to appear in a table style to grow on hovering. I also want it to go into advanced state to provide a nice user interface.
I did it in Chrome. Flex grows also works in IE, but the transition does not. I checked triple and the transitions are supported in IE10, so I'm obviously doing something else wrong. I tried to learn all four possible transition attributes, but everything seems to be as it should. I can not find anything in the documentation that contradicts my own setup.
Here is my own fiddle: https://jsfiddle.net/3vrp7xyo/3/ Here is a fiddle from another answer to the question here showing the same problem: http://codepen.io/DrYSG/pen/ovctn (just remove the slash in the js tab to make it work)
UPDATE: A new script shows that transitions work fine in both browsers, outside flexbox: https://jsfiddle.net/3vrp7xyo/9/
Note that the gradient color transition actually works in both browsers, but horizontal zoom in / out doesn't
Here is my code:
.day-row>div { line-height: 18px; text-align: center; margin: -2px -1px; border: 2px solid black; font-size: 11px; color: black; } .day-row>div:first-child { margin-left: -2px; } .day-row>div:last-child { margin-right: -2px; } .day-row { background-color: #CCDFE0; margin: -2px; border: 2px solid black; background-color: white; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .releasecalendar-container { margin: 0 auto; padding: 25px; max-width: 1500px; } .month-column { padding: 0; margin: -2px -1px; border: 2px solid black; } .day-sunday>.weekday-name-column, .day-sunday>.date-column { background-color: #F44336; color: white; } .event { flex: 1; overflow: hidden; white-space: nowrap; text-align: center; cursor: pointer; -moz-transition: all 0.2s; -o-transition: all 0.2s; -webkit-transition: all 0.2s; color: white; font-weight: bold; } .event:hover { flex: 10; } .weekday-name-column, .date-column { width: 22px; } .FZ { background-color: #0098c3; } .FZ:hover { color: #0098c3; background-color: #11caff; } .H { color: black; background-color: #FFF; } .H:hover { background-color: #BBB; }
<div class="month-column"> <div class="day-row" id="day-1-2016" data-year="2016" data-month="0" data-day="1"> <div class="weekday-name-column">Fr</div> <div class="date-column">01</div> <div class="event FZ 1 2 3 4"><span>Event 1</span></div> <div class="event H 1 2 3 4"><span>Event 2</span></div> </div> <div class="day-row" id="day-1-2016" data-year="2016" data-month="0" data-day="1"> <div class="weekday-name-column">Sa</div> <div class="date-column">02</div> <div class="event FZ 1 2 3 4"><span>Event 1</span></div> <div class="event H 1 2 3 4"><span>Event 2</span></div> <div class="event H 1 2 3 4"><span>Event 3</span></div> </div> </div>
UPDATE: I found this page to automatically prefix my CSS code , but even after generating all the possibly missing prefixes, it didn't change the user interface.
source share