Can't get transitions to work with IE11

Question

I have stipped all extra code from my html file but can't get the transitions to work on IE11 could you please help, I have added special meta tag which also didn't fix the problem.

Code works completely fine in chrome, mozilla, opera, but not the bloody IE11. Please help, I spent whole day with this problem and I feel really stupid (maybe I am god knows), have designed the menu for www.wood-floor-experts.com which works perfectly in IE11 but this code doesnt work and thats it no matter what I do.

<!DOCTYPE html>
<html lang="en-GB" prefix="og: http://ogp.me/ns#">
    <head>
        <title></title>
        <meta http-equiv="x-ua-compatible" content="IE=edge" >
        <style type="text/css">
            .nav_cont {
              width: 100%;
              z-index: 1000;
            }

            .toggle_cont {
              display: block;
              text-align: center;
              background: transparent;
            }

            .togle_btn {
              border: none;
              width: 80px;
              padding: 20px;
              background-color: rgba(132, 128, 136, 0.75);
              z-index: 500;
              cursor: pointer;
              -moz-border-radius-bottomleft: 5px;
              -webkit-border-bottom-left-radius: 5px;
              border-bottom-left-radius: 5px;
              -moz-border-radius-bottomright: 5px;
              -webkit-border-bottom-right-radius: 5px;
              border-bottom-right-radius: 5px;
              text-align: center;
            }

            .togle_bar {
              background-color: #fff;
              display: table;
              margin: 0 auto;
              width: 30px;
              height: 1px;
              border-radius: 1px;
            }

            .togle_bar + .togle_bar {
              margin-top: 3px;
            }

            .nav_cont {
              z-index: 1000;
            }

            .nav_cont ul {
              background: rgba(0, 0, 0, 0.4);
              display: block;
              overflow: hidden;
              max-height: 0;
              -moz-transition: max-height, 0.5s, ease-in-out;
              -o-transition: max-height, 0.5s, ease-in-out;
              -webkit-transition: max-height, 0.5s, ease-in-out;
              transition: max-height, 0.5s, ease-in-out;
            }

            .nav_cont ul li {
              position: relative;
              display: block;
              text-align: center;
            }

            .nav_cont ul li a {
              display: block;
              text-decoration: none;
              padding: 15px;
            }

            .nav_cont ul li a:hover {
              color: #fff;
            }

            .nav_cont ul li ul {
              height: 104px;
              max-height: 0;
            }

            .nav_cont ul li.shown ul {
              max-height: 104px;
            }

            .nav_cont ul.shown {
              max-height: 416px;
            }
        </style>
    </head>
    <body>
    <!-- Navigation============================================================= -->
    <nav class="nav_cont">
         <ul id="menu-main-navigation" class="nav nav_bg">
             <li class="active"><a title="Home" href="#">Home</a></li>
                <li class="dropdown"><a title="Products" href="#">Products</a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a title="Doors" href="#">Doors</a></li>
                        <li><a title="Windows" href="#">Windows</a></li>
                    </ul>
                </li>
            <li><a title="Services" href="#">Services</a></li>
            <li><a title="Portfolio" href="#">Portfolio</a></li>
            <li><a title="About Us" href="#">About Us</a></li>
            <li><a title="Contacts" href="#">Contacts</a></li>
        </ul>               
        <div class="toggle_cont">
            <button type="button" class="togle_btn">
                <span class="togle_bar"></span>
                <span class="togle_bar"></span>
                <span class="togle_bar"></span>
            </button>
        </div>
    </nav>
<!-- Footer ================================================================ -->
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
        <script type='text/javascript'>
            jQuery(document).ready(function($) {

              $('.dropdown').click(function() {
                $(this).toggleClass('shown');
              });

              $('.togle_btn').click(function() {
                $('ul.nav').toggleClass('shown');
              });
        });
        </script>
    </body>
</html>

Answer 1

You don't need to use comma:

transition: max-height, 0.5s, ease-in-out;

Use:

transition: max-height 0.5s ease-in-out;

So do in other vendor prefixes too.

Can't get transitions to work with IE11

Question

1 answers

solution1
0 2015-01-21 14:11:38

Can't get transitions to work with IE11

Question

1 answers

solution1 0 2015-01-21 14:11:38

solution1
0 2015-01-21 14:11:38