search

zurb / foundation-apps

The first front-end framework created for developing fully responsive web apps.
http://foundation.zurb.com/apps
MIT License
1.58k stars 215 forks source link

zf-toggle/zf-open behaves strangely with jQuery 2.1.1 #481

Open jimmypoms opened 9 years ago

jimmypoms commented 9 years ago

With jQuery 2.1.1 zf-toggle/zf-open in combination with zf-panel does not work correctly.

It does work as expected the first time the panel is opened. In the following toggles however, opening results in animating the panel correctly and shortly disappearing.

It seems like the "is-active" class is removed somewhere.

gakimball commented 9 years ago

Have you written any jQuery code related to panels? If you just remove jQuery, do the animations start working again?

jimmypoms commented 9 years ago

So I did some further investigating on the issue :)

I did strip my project from all dependencies in order to confirm. Here's the html i used to confirm the issue:

<!doctype html>
<html class="no-js" ng-app="app">
<head>
<meta charset="utf-8">
<title>Project</title>
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="../bower_components/foundation-apps/dist/css/foundation-apps.css" />
</head>
<body>
    <!--[if lt IE 9]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div class="grid-frame">
        <zf-panel id="sidebar" class="medium-grid-block fast shrink vertical" position="left">
            <div class="brand-area">
                <a class="hide-for-medium mobile-header-nav-btn-close" zf-toggle="sidebar" href="#">
                    <span class="nav-burger"></span>
                    <span class="nav-burger"></span>
                    <span class="nav-burger"></span>
                </a>
            </div>
            <div class="grid-content"></div>
        </zf-panel>

        <zf-panel id="user-settings" class="fast user-settings" position="right">
            <div class="grid-block shrink">
                <a href="#" class="user-settings-close" zf-close="user-settings">close</a>
            </div>
            <div class="grid-content"></div>
        </zf-panel>

        <div class="grid-block collapse vertical">
            <div id="header" class="collapse" es-header>
                <a href="#" zf-toggle="user-settings">
                    <span>toggle</span>
                </a>
            </div>

            <div class="grid-content vertical" ng-class="['ui-animation']" ui-view="">
            </div>
        </div>
    </div>

    <script src="../bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js"></script>
    <script src="../bower_components/viewport-units-buggyfill/viewport-units-buggyfill.hacks.js"></script>
    <script src="../bower_components/tether/tether.js"></script>
    <script src="../bower_components/fastclick/lib/fastclick.js"></script>
    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="../bower_components/angular-animate/angular-animate.js"></script>
    <script src="../bower_components/hammerjs/hammer.js"></script>
    <script src="../bower_components/foundation-apps/dist/js/foundation-apps.js"></script>
    <script src="../bower_components/foundation-apps/js/vendor/iconic.min.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/services/foundation.core.animation.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/services/foundation.core.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/services/foundation.dynamicRouting.animations.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/services/foundation.dynamicRouting.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/services/foundation.mediaquery.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/vendor/markdown.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/vendor/svgDirs.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/components/accordion/accordion.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/components/actionsheet/actionsheet.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/components/iconic/iconic.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/components/common/common.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/components/interchange/interchange.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/components/modal/modal.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/components/notification/notification.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/components/offcanvas/offcanvas.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/components/popup/popup.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/components/tabs/tabs.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/components/panel/panel.js"></script>
    <script src="../bower_components/foundation-apps/js/angular/foundation.js"></script>

    <script src="app/app.module.js"></script>
</body>
</html>

my bower.json:

{
  "name": "unicorn",
  "version": "0.0.0",
  "dependencies": {
    "foundation-apps": "~1.0.2",
    "angular": "~1.3.4"
  },
  "devDependencies": {}
}

and finally my app.module.js

(function() {
    'use strict';

    angular.module('app', [
            'foundation',
        ]);

})();

Now if I add jquery and include it before angular.js, the panel stops working correctly. Not working correctly means:

Somewhat related: CSSO also breaks the module, just FYI ;).

Right now we can live with not including jQuery, it is however a bug worth investigating.

escapedcat commented 9 years ago

Yay! Related issue here.

We have a button (<a class="button" ...) within a panel. A toggle-button is outside of the panel. If I toggle it 1-3 times and move the mouse over the button, the is-active class is removed and the panel disappears.

If I remove the button class from the <a> it works though.

To reproduce:

var foundationJS = [
  'bower_components/jquery/dist/jquery.js',
  'bower_components/fastclick/lib/fastclick.js',
  ...
---
name: home
url: /
---

<h1>Welcome to Foundation for Apps!</h1>
<p class="lead">This is version <strong>1.0.3 Matterhorn</strong>.</p>

<a zf-toggle="js-zf-panel">
    Toggle Panel</a>

<zf-panel position="right" id="js-zf-panel">
    <div class="grid-content">

        <a ui-sref="about" class="button expand">
            First button</a>

    </div>
</zf-panel>

p.s. Chrom: Version 42.0.2299.0 canary (64-bit) Foundation for apps: 1.0.3 jQuery: 2.1.3 (I tried 2.0.x and 1.x as well)

jamieshark commented 9 years ago

Hmm this is a really tricky bug to narrow down the source... Will be taking a closer look at this.

josteinhanssen commented 9 years ago

Yeah, I'm having the same issue (button within a panel). I'm dependent jQuery, so this is a rather big issue for me. It seems to work fine in Firefox and IE though, but in Chrome (40.0.2214.115) and Vivaldi the issue remains. As escapedcat, I tried with a older version of jQuery (1.7.2), but the issue was the same (as far as I could tell).

naneer commented 9 years ago

Edit: Using negative values for position elements, instead of negative margin values.

I had the same issue by nesting panels and closing them with a Hard-Toggle. I don't have jQuery. It happens in Chrome and IE.

When placing the zf-open button for the child panel inside the parent panel, do the following:

  1. Open Parent Panel
  2. Open Child Panel
  3. Press Hard-Toggle
  4. Wait for more than 3 seconds
  5. Open Parent Panel
  6. Open Child Panel

The child panel disappears on the second run. I traced the problem down to this bug. Essentially what's happening is that the transitionend event is not fired for the child panel since the transition was canceled out because the parent element (parent panel) has a style of display:none from the base panel class. Then, after 3 seconds, the setTimeout function runs removing left over style classes.

The problem now though is that the event listener is still listening for the event, and so when the transitionend occurs for the second 'Open', the finishAnimation runs again for the previous 'Close'.

The possible solution would be to avoid using display: none. By using a negative left, top, right, bottom values for each respective panel position and removing the values for display in the 'base' and is-active class, and the setTimeout function, I was able to do it with the following edits to the panel.scss:

%panel-base {
  position: absolute;
  z-index: 100;
  overflow-y: auto;
}

For hidden panels:

  /*
    Direction
  */
  @if $position == top {
    top: -9999px;
    width: 100%;
  }
  @else if $position == right {
    right: -9999px;
    height: 100%;
  }
  @else if $position == bottom {
    bottom: -9999px;
    width: 100%;
  }
  @else if $position == left {
    left: -9999px;
    height: 100%;
  }

For displayed panels:

  &.is-active {
    @if $position == left        { box-shadow: $shadow-distance 0 $shadow-size $shadow-color; top: 0; left: 0; }
    @else if $position == right  { box-shadow: (-$shadow-distance) 0 $shadow-size $shadow-color; top: 0; right: 0;}
    @else if $position == top    { box-shadow: 0 $shadow-distance $shadow-size $shadow-color; top: 0; left: 0;}
    @else if $position == bottom { box-shadow: 2px (-$shadow-distance) $shadow-size $shadow-color; bottom: 0; left: 0;}
  }

Then in motions.scss, added left, top, right, and bottom to transition-property (especially needed for firefox):

  // CSS Output
  @include transition-start($dir) {
    @include transition-basics($duration, $timing, $delay);
    transition-property: transform, opacity,  left, top, bottom, right;
    backface-visibility: hidden;
    transform: $start;

    @if $fade { opacity: if($dir == in, 0, 1); }
  }

It no longer has to rely on the a timeout function to cleanup the styles. Also I've read online that the display:none isn't friendly with on-screen readers. Anyways, just dropping this in hoping this could be of any help. If it works for others and the zurb team likes it, I was hoping to submit a pull request :).

naneer commented 9 years ago

On a second trial, I think the root cause was the event listener in animations, I made a pull request. https://github.com/zurb/foundation-apps/pull/547

ghost commented 9 years ago

We are also seeing the same behavior as described above when jQuery is loaded. When jQuery is removed the odd behavior discontinues. Unfortunately jQuery is required for our project. Has there been any updates on this issue?

gakimball commented 9 years ago

Hey guys, sorry for the late response, but let's try to untangle this web of fun. Things that cause panels to unintentionally close are:

Seems like the last two happen because transitionend bubbles up unintentionally. #547 fixes this, so we'll bring in that change once we've reviewed it. Will that also fix the first issue with jQuery?

jamieshark commented 9 years ago

I've merged in #547 and did some basic testing and it seems to be working out okay. Please let me know if there is specific case that this PR didn't address.

naneer commented 9 years ago

Hey, the PR fixes the first issue with jQuery, I had some time today to test it out. Used the same html provided above and added jquery to the top of the foundationJS array in the gulp file. Disappears without the PR, works with it. Thanks