Button link jumps on click

Question

I am using Mixitup JQuery for a portfolio page that sorts my content between a few different filters. When I click on an item now, the Jquery works and the content shuffles, but the buttons jump up about 50px for a second, before going back to where they have been positioned.

If you double click on the same link, "web" or "contact", you can replicate this. – Marc Jenkinson 43 mins ago

check it out here: http://codepen.io/anon/pen/BJnhH

$(function(){
  $('#content-column').mixItUp();
});

If you double click on the same link, "web" or "contact", you can replicate this. — Marc Jenkinson, Sep 28 '14 at 18:59
The issue is not clear in the CodePen and double-clicking does not seem to reproduce it. Please provide code with your link. — Chris Burton, Sep 28 '14 at 19:02
Do you realise that having your sidebar as `position: fixed` means that you can't scroll to see the content on a small screen (e.g. that on a codepen)? — i alarmed alien, Sep 28 '14 at 19:07
Try to validate your **CSS** from [Here](http://www.css-validator.org/) and see the results. — Syed Ali Taqi, Sep 28 '14 at 19:11
just wondering how you codepen is going to work when you have a script source set as "js/vendor/jquery.mixitup.min.js"? How about adding the javascript into the codepen? — Macsupport, Sep 28 '14 at 19:58

score 0 · Answer 1 · edited May 23 '17 at 12:05

When you say

button.items:focus {
  display:none;
}

You aren't saying "Hide the focus on these buttons".

You're saying "Hide the button being focused".

This is what's causing your visual jump. Remove these lines and you'll see they don't disappear when clicked.

There effective ways to remove the focus effect across modern browsers (which you can find here on Stack Overflow) , but better yet, you should make these elements into anchors.

EDIT: Here's a link to How to remove border (outline) around text/input boxes? (Chrome)

Button link jumps on click

1 Answers1