CODEWITHSUNDEEP
htmlcssangularjs
antonio escudero
antonio escudero

Reputation: 109

AngularJS animate not working in Firefox

Check this code: http://jsfiddle.net/j7C5B/

This is the html

<div ng-app="myApp">
<div class="searchContainer" ng-controller="SearchCtrl">
    <ul>
        <li class="advSearchRow" ng-show="advSearch">
            <div class="todayButton">Today</div>
            <div class="tomorrowButton">Tomorrow</div>
            <div class="calendarButton">?</div>
        </li>
        <li><div class="advSearchButton" ng-click="display()">Advance Search</div></li>         
    </ul>    
</div>

It works perfectly with Chrome and Safari but it has a weird behavior in Firefox, anyone has an idea what is wrong with it? I have been trying to only leave height, line-height and different changes with no result yet. Thanks

Upvotes: 0

Views: 914

Answers (1)

tungd
tungd

Reputation: 14897

Edit: It's very different from what I thought, and is rather simple. Firefox requires line-height to have a unit, while Webkit browsers accept unit-less value and interpret as em. To fix it you just have to add em to the transition (or px, doesn't matter since it is 0, but there must be one unit). See http://jsfiddle.net/78rvg/

.advSearchRow.ng-hide
{
    line-height: 0em;
    height: 0;
    opacity: 0;
    margin-bottom: 0;
}

The thing is: Your code assumes that the height of the buttons (.todayButton, .tomorrorButton...) to be the height of their container (.advSearchRow); which is not true in the case of floating elements (that's why we need clearfix).

You can fix this by specify the assumption explicitly for the buttons:

.advSearchRow > div { height: 100% }

or use overflow: hidden:

.advSearchRow { overflow: hidden }

Upvotes: 3

Related Questions