CODEWITHSUNDEEP
javascripthtmlcssinternet-explorerfirefox
Bryan Fajardo
Bryan Fajardo

Reputation: 161

Strange stuff with IE11 AND Mozilla css transitions

So, lately I found I could use css:transitions to make for smoother looking web pages.

However, when I went to test out my website on Mozilla Firefox and IE11 both of them have odd little bugs that destroy the "smoothness" of the site I'm trying to make.

Chrome is an example of how my site should act. There are 4 functions, and 6 css transitions.

The functions are working perfectly fine, the problems are the following:

In IE(11 and most likely lower) : The css transition in the id div "main_wrapper" is not working correctly. It changes the widths instantly rather than taking 1.5 seconds like I require it to. The reason is this. The navigation bar to the left is 19% width, with a float left. The "main_wrapper" is 80% width, with a float right. This leaves a 1% gap between them, if the "main_wrapper" div is incremented/changed instantly to calc(100% -1px) width, then it will get pushed downwards, until the nav bar finishes lowering its width to 0.1px. This is basically ruining the entire point of my functions :( and I'm not sure how to solve it.

In Mozilla Firefox: In this browser there is a similar error, except not as serious, instead of transitioning the "letter-spacing" from the "#Nav #About,#Work, #Contact" in 1.5 seconds, it is doing it instantly. Also, this makes my site look less silky smooth.

It seems like these browsers are simply not reading these transitions, because they are doing the other transitions just fine, I'd like know what I'm doing wrong since this is relatively new to me. Here is the site live: Paxframe

The HTML: 

<title>Bryan the Lion</title>
</head>
<body>
    <script type="text/javascript">
    function bla(){
        var myElement = document.querySelector("#nav");
        var myElement2 = document.querySelector("#nav ul") ;
        myElement2.style.marginTop = "100px";
        myElement.style.width = "0.1px";
        myElement2.style.opacity = "0.0" ;

    }
    function bla2(){
        var myElement = document.querySelector("#nav");
        var myElement2 = document.querySelector("#nav ul") ;
        myElement2.style.marginTop = "100";
        myElement.style.width = "19%";
        myElement2.style.opacity = "1.0" ;
    }
    function keepWrapper(){
        var myElement2 = document.querySelector("#main_wrapper") ;
        myElement2.style.width = "calc(100% - 1px)";
    }
    function revertWrapper(){
        var myElement2 = document.querySelector("#main_wrapper") ;
        myElement2.style.width = "80%";
    }
    </script>

    <div id = "header" onmouseover= "bla2(),revertWrapper()">
        <div id="imgdiv"><img src="images/Pax_Frame.png"></div>
    </div>
    <div id ="nav" onmouseover = "bla2(),revertWrapper()">
        <ul>
            <li id = "About" onclick=   "$('#main_inner1').animatescroll({element:'#main'});">About<a ></a></li>
                <li id = "Work" onclick= "$('#main_inner2').animatescroll({element:'#main'});">Work<a href="#" ></a></li>
                <li id = "Contact" onclick= "$('#main_inner3').animatescroll({element:'#main'});">Contact<a href="#" ></a></li> 
            </ul>
    </div>  
    <div id = "main_wrapper" onmouseover = "bla(),keepWrapper()" >
        <div id ="main">
        <div id = "main_inner1" >
        <div style = "width:100% ; height: 250px ; font- size: 140% ;">
                    <p style = "margin-left:5% ;">
                        To us the m</p>
            </div>
            <div class = "floatleft" style = "margin-left:5%;">
                    <div class = "textDiv"><p> 
                    <span style = "color:#0000FF ;">we have
                                             that special touch.
                    </span></p>
                    </div>
                </div>
                <div class = "floatleft">

                </div>
                <div class = "floatleft" >

                </div>
            </div>
            <div id = "main_inner2" >
                <p>some div2</p>
            </div>  
            <div id = "main_inner3">
                <p>some div3</p>
            </div>  
        </div>
    </div>


</body>


</html>

The CSS: 

body{
height: 100% ; 
}
@font-face {
font-family: "Exo";
src: url(fonts/Exo-Regular.otf) format("truetype");
}
@font-face{
font-family: "Dev";
src: url(fonts/devroye.ttf) format("truetype");
}
a{text-decoration: none;}
#header{
height: 98px ;
max-height: 20% ;
width: 100% ;
color: white ;
}
#header #imgdiv{
margin: 0 auto ;
width: 220px ;
height: 90px ;
}
#main_wrapper{
height: calc(100% - 100px );
float: right;
width: 80%;
overflow: hidden;
transition:width 1.5s;
-webkit-transition:width 1.5s;

}
#main_wrapper #main{
width: 103%;
height: 100%;
overflow-y:scroll; 
}
#main_inner1{
background: rgba(192,192,192 , 0.1) ;
height: 1000px ;
width: 100%;
background-repeat: repeat;
}
#main_inner1 .floatleft{
border: dashed 2px #e0e3e5 ;
height: 30% ;
width: 30% ;
float: left;
font-family: Anton ;
}
#main_inner1 .floatleft:hover{
background: #CEE3F6 ;
border: solid 2px white ;
}
#main_inner1 .floatleft .textDiv{
width: 300px ;
height: 150px ;
margin: 0 auto ;
font-size: 140% ;
padding: 5px ;
}
#main_inner2{
height: 1000px ;
width: 100% ;
background: #7994a7 ;
}
#main_inner3{
height: 1000px ;
width: 100% ;
background: #7994a7 ;
}
#nav{
float: left ;
width: 19% ;
height: 80% ;
-webkit-transition:width 1.5s; /* For Safari 3.1 to 6.0 */
transition:width 1.5s;
font-family: Exo ;

}
#nav ul{
margin-top: 100px ;
text-align: center;
-webkit-transition:opacity 1.3s; /* For Safari 3.1 to 6.0 */
transition:opacity 1.3s;

}
#nav ul li a{
display: block
cursor: pointer;;
height: 10px ;


}
#nav #About{
cursor: pointer;
-webkit-transition:letter-spacing 1.5s; /* For Safari 3.1 to 6.0 */
transition:letter-spacing 1.5s;
}
#nav #About:hover{
color: red ;
letter-spacing: 18px ;
}
#nav #Work{
cursor: pointer;
-webkit-transition:letter-spacing 1.5s; /* For Safari 3.1 to 6.0 */
transition:letter-spacing 1.5s;
 }
#nav #Work:hover{
color: red ;
letter-spacing: 18px ;
}
#nav #Contact{
cursor: pointer;
-webkit-transition:letter-spacing 1.5s; /* For Safari 3.1 to 6.0 */
transition:letter-spacing 1.5s;
}
#nav #Contact:hover{
color: red ;
letter-spacing: 18px ;
}

Upvotes: 0

Views: 772

Answers (2)

user3352368
user3352368

Reputation: 46

As Bryan says, IE11 seems to have a bug when using a calc() value as a value to transition to/from.

I opened a bug report which includes a jsfiddle: http://connect.microsoft.com/IE/feedback/details/868216/cannot-use-css-calc-as-value-for-css-transition-ie11. Still waiting for feedback from them.

[Sorry, didn't want to create a whole new answer but can't comment yet.]

Upvotes: 2

Bryan Fajardo
Bryan Fajardo

Reputation: 161

Okay so I figured it out.

IE doesn't seem to read calc(100% - 1px) when applied through a function like keepWrapper(). This is what was causing the issues with IE. To make it work I simply remade all the widths.

When keepWrapper() is called:

  • nav is 1%,
  • the gap is 0%,
  • main_wrapper is 98% and 1% margin-right

When revertWrapper() is called:

  • nav is 19%
  • gap is 1%
  • main_wrapper is 79% and still has a margin right of 1%

With Mozilaa Firefox the issue is Firefox doesn't read default values. This:

#nav #Contact{
    cursor: pointer;
    -webkit-transition:letter-spacing 1.5s; /* For Safari 3.1 to 6.0 */
    transition:letter-spacing 1.5s;
}
#nav #Contact:hover{
color: red ;
letter-spacing: 18px ;
}

Had to be re-written as this:

#nav #Contact{
    cursor: pointer;
   -webkit-transition:letter-spacing 1.5s; /* For Safari 3.1 to 6.0 */
    transition:letter-spacing 1.5s;
    letter-spacing: 0px ; /*must do this for Firefox */
}
#nav #Contact:hover{
color: red ;
letter-spacing: 18px ;
}

Upvotes: 2

Related Questions