title: Why I can't use mouseover from bottom and left in Safari?
body: <p>I am working on a banner which on mouseover it will expand. Bu is working perfect in Chrome Firefox and IE11 but on Safari I can't expand if I put the mouse over from left to right or from bottom to top.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="ad" class="collapsed"&gt;
          &lt;div id="banner"&gt;
              &lt;img class="back" id="back" src="frames/frame_1.jpg"/&gt;
              &lt;img class="top" id="top" src="frames/frame_2.jpg"/&gt;
              &lt;img id="logo1" type="image/svg+xml" src="" /&gt;                                              
              &lt;div class="border" id="border"&gt;&lt;/div&gt;
              &lt;img id="cta" src="frames/title.png"/&gt;
          &lt;/div&gt;
          &lt;div id="expansion"&gt;
              &lt;div class="exp_hm" id="exp_hm" &gt;
                  &lt;div class="con-pos" id="con-pos" &gt;                                         
                      &lt;div id="videoContainer" class="videoContainer"&gt;           
                          &lt;video class="video" id="video" poster="images/video_poster.jpg" autoplay&gt;&lt;/video&gt;
                      &lt;/div&gt;                                                                        
                  &lt;/div&gt;                    
              &lt;/div&gt;
              &lt;div class="endframe"&gt;&lt;/div&gt;
              &lt;img id="logo2" type="image/svg+xml" src="" /&gt;
              &lt;div id="box"&gt;&lt;/div&gt;
               &lt;div class="topgrp"&gt;
                  &lt;div id="close-button" class="icon-cross"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="bottomgrp"&gt;
                  &lt;div id="replay" class="icon-replay"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>function isClicked(e) {
      console.log('isclicked also called...');
      if (!expanded) {
          expand();
          console.log("is collapsed " + collapsed);
      }
  }
  
  function expand() {
      collapsed = false;
      expanded = true;
      adDiv.classList.remove("collapsed");
      adDiv.classList.add("expanded");
      $('#close-button').show();
      // expansionDiv.style.visibility = "visible";
      //ok whats new for a pushdown ?
      EB.expand();
      expansionDiv.style.height = expH + "px";
      expansionDiv.style.width = expW + "px";
      //check the replay is not showing
      $('#replay').hide();
      var temp = video.src.slice(-5)
      var res = temp.substr(0, 1);
      document.getElementById("box").style.height = "100%";
      stage.style.height = expH + "px";
      expansionDiv.style.height = expH + "px";
      adDiv.style.height = expH + "px";
      $('#videoControls').show();
      if (isIE9) {
          forceVideoToDisplayInIE9();
      }
      $("#exp_hm").stop(true, true).delay(0).fadeTo(1000, 1);
      $("#con-pos").animate({
          'opacity': '1',
          'width': expW + "px",
          'height': expH + "px",
          'left': "0px"
      }, 1000, 'linear', playVideo);
  }
  
  function collapse(e) {
      //clean up the end frame code on repeating functionality...so if we get to the end of the video collapse then replay..
      $('.endframe').hide();
      $('#replay').hide();
      $('#close-button').hide();
      expansionDiv.style.height = initialH + "px";
      expansionDiv.style.width = initialW + "px";
      video.removeEventListener("ended", videoEnd);
      document.getElementById("logo2").style.filter = "alpha(opacity=0)";
      document.getElementById("logo2").style.opacity = 0
      if (video) {
          video.pause();
      }
      $("#con-pos").animate({
          'opacity': '0',
          'width': initialW + "px",
          'height': initialH + "px",
          'left': "0px"
      }, 0);
      $("#exp_hm").stop(true, true).delay(0).fadeTo(0, 0, function () {
          document.getElementById("con-pos").style.width = initialW;
          document.getElementById("con-pos").style.left = expW - initialW;
          video.currentTime = 0;
          adDiv.classList.add("collapsed");
          adDiv.classList.remove("expanded");
          video.pause();
          document.getElementById("ad").style.width = initialW + "px";
          document.getElementById("ad").style.height = initialH + "px";
          document.getElementById("container").style.width = initialW + "px";
          document.getElementById("container").style.height = initialH + "px";
          EB.collapse();
          collapsed = true;
          expanded = false;
          // console.log("is expanded " + expanded);
      });
  }
  
  function addEventListeners() {
      if (collapsed = true) {
          $("#container").hover(function () {
              collapsed = false;
              isClicked();
          });
      }
  }
  </code></pre>