Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Navigation not working correctly in latest versions of Chrome #79

Closed
aaboyd opened this issue Jun 5, 2013 · 2 comments
Closed

Navigation not working correctly in latest versions of Chrome #79

aaboyd opened this issue Jun 5, 2013 · 2 comments

Comments

@aaboyd
Copy link

aaboyd commented Jun 5, 2013

In the latest versions of chrome, the browser supports both touch events and pointer / click events.

The Modernizr test used in gumby.init.js checks if touch is compatible, which it is, but often times this will not be the case. You lose the hover affect, and the dropdown doesn't appear to be working.

What is really weird is that the Gumby homepage still has dropdowns that work, but no hover events. If you open chromes console and do window.Gumby.click you can see that it gets set to "tap"

Upcoming change in Modernizr touch detection caused by this same issue. They are going to implement touchevents and pointerevents. If browser supports touch is not a good test, it will be gone in next update to Modernizr.

By the way, Modernizr is only being used to detect if the browser supports touch? Is that a bit overkill?

Here is a simple demo to show my findings.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Gumby Test</title>
    <link href="/assets/css/gumby.css" rel="stylesheet">
    <script src="/assets/js/libs/modernizr-2.6.2.min.js"></script>
  </head>

  <body>
    <div id="navbar-main-nav" class="navbar">
      <div class="row">
        <a class="toggle" gumby-trigger="#navbar-main-nav #main-nav" href="#"><i class="icon-menu"></i></a>
        <h3 class="four columns logo">
          <a href="/">Test Page</a>
        </h3>
        <nav>
          <ul id="main-nav" class="eight columns pull_right">
            <li><a href="#">HAS NO CHILDREN</a></li>
            <li class>
              <a href="#">HAS CHILDREN</a>
              <div class="dropdown">
                <ul>
                  <li><a href="#">NESTED 1</a></li>
                  <li><a href="#">NESTED 2</a></li>
                </ul>
              </div>
            </li>
          </ul>        
        </nav>
      </div>
    </div>

    <div class="container"></div>

    <script src="/assets/js/libs/jquery-1.9.1.min.js"></script>
    <script src="/assets/js/libs/gumby.min.js"></script>
    <script src="/assets/js/plugins.js"></script>
    <script src="/assets/js/main.js"></script>
  </body>
</html>
@chambaz
Copy link
Contributor

chambaz commented Jun 5, 2013

Hey there,

What version of Chrome are you using? I believe this is only in Chromium for now, I have just tested with the latest version of Chrome (27.0.1453.110) and Gumby.click still equals 'click'. Removing the navbar UI module will solve this issue as a workaround for now. We recently released that module in an attempt to improve our navbar on touch devices.

I agree this aspect of the framework will need updating very soon and we are currently thinking about the best ways to handle it. As the Modernizr issue you linked to implies, as touch and click devices merge, it is not longer a simple matter.

Ideally we would like to fully move to pointer events but due to poor support I think we will use pointer events if available and if not then test for touch events, as we currently are, with a fallback to regular old click. Although if pointer events are supported we will not need the jQuery mobile script we may provide an option to load it anyway so events like swipe and pinch are still available. What's your thoughts on this solution?

Modernizr is being used for it's HTML5 Shiv, touch event detection and it's conditional loader. It is also provided in the framework for it's various HTML5 feature support detection which we use, in some aspect, in every project we build. We could look at building custom touch detection and load the jQuery mobile script manually but as Modernizr will be included with the framework anyway we felt we may as well take advantage of it's features.

Thanks for your post. We love contributions so if you want to submit a pull request or send me any ideas you have on how to handle this better that would be awesome, we love working with the community. Thanks again.

@aaboyd
Copy link
Author

aaboyd commented Jun 5, 2013

Thanks for the quick response. I just took a look again, everything appears to be working. I probably had some settings in chrome a little messed up, I often use the "Override User-agent" setting and I probably screwed myself.

Funny how I found this Modernizr thread while Googling around. Maybe I will fork and work on smoother navbar with both touch and pointers. Either way Gumby will need to update the Modernizr.touch because it will be gone in upcoming versions.

Sorry for posting a bug, that really isn't a bug 😞

@aaboyd aaboyd closed this as completed Jun 5, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@chambaz @aaboyd