Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Laggy response to CSS :hover for background color change

    Hi everyone.

    I have a really strange problem that I just can't figure out. I have already posted this question elsewhere, but have had no luck as of yet getting a definitive answer to what is going on.

    I will explain the problem and then outline the steps I have taken to figure it out.

    The Problem:

    On my website http://stickerstack.co.uk I have a nav menu on the left side. As you can see, I have (li a) elements in the nav menu set to change background color on hover.

    Everything works perfectly where I have tested it so far (Mac - Opera, Chrome, Firefox; and Windows - Chrome, Firefox). However, in Safari (on Mac (and maybe windows - didn't test)) there is a strange lagging effect where the background sometimes either doesn't change, or lags and changes a second or two after mouseover.

    Steps I Have Taken

    1. Stripped away all the unneeded HTML, CSS, and Javascript on my site until left with the bare essentials used to construct the menu (pure HTML and CSS). The lag remained.

    2. Tested the same menu on jsfiddle:http://jsfiddle.net/5jA78/5/ and it worked perfectly.

    3. I wondered if it might be a problem with my computer/GPU, but I replicated the issue on my friend's brand-new macbook air. (I am using my 2010/11 iMac)

    Other Stuff

    1. The problem seems to disappear when I am playing a video in YouTube or have a game running in the background. (strange, right?)

    2. I am using Shopify, and I am hosted on their servers.

    3. The problem doesn't seem to appear on other sites using similar effects.

    4. I know my JS is bloated, but I am pretty sure this isn't to blame (see above - I removed it and the problem persisted)

    - -- --- ---- ----- ---- --- -- -

    Thanks in advance to anyone who can shed any light on what might be causing this. If any more info is required, please let me know. Cheers!

  • #2
    New Coder
    Join Date
    Jul 2012
    Posts
    67
    Thanks
    14
    Thanked 6 Times in 6 Posts
    Hi there! Could you do us a favor and post the problem code and corresponding CSS here? It's a bit of a chore to muddle through your CSS's to find the code in question.

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    couldnt review the page properly. alot of the requests for your css files from the shopify site are being aborted and the page isnt loading correctly ( happens almsot every time in firefox , eventually works in chrome, extremely problematic). I would contact the support at this shopify place becuase thats where almost all of your code, css, and images are coming from.

  • #4
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @ superwookie

    Thanks for the reply.

    Here's the code:

    HTML
    Code:
    <nav>
     <ul>
      <li id="nav-theme" class="nav-item"><a href="/collections/all">stickers</a>
       <ul class="drop">
        <li class="nav-subcategory nav-subcategory-first nav-stickers"><a href="/collections/all/stickers">view all</a></li>
        <li class="nav-subcategory nav-animals"><a href="/collections/all/animals">animals</a></li>
        <li class="nav-subcategory nav-black-and-white"><a href="/collections/all/black-and-white">black and white</a></li>
        <li class="nav-subcategory nav-colourful"><a href="/collections/all/colourful">colourful</a></li>
        <li class="nav-subcategory nav-diary"><a href="/collections/all/diary">diary</a></li>
        <li class="nav-subcategory nav-dress-up"><a href="/collections/all/dress-up">dress up</a></li>
        <li class="nav-subcategory nav-emotions"><a href="/collections/all/emotions">emotions</a></li>
        <li class="nav-subcategory nav-felt"><a href="/collections/all/felt">felt</a></li>
        <li class="nav-subcategory nav-food"><a href="/collections/all/food">food</a></li>
        <li class="nav-subcategory nav-googly"><a href="/collections/all/googly">googly</a></li>
        <li class="nav-subcategory nav-love"><a href="/collections/all/love">love</a></li>
        <li class="nav-subcategory nav-school"><a href="/collections/all/school">school</a></li>
        <li class="nav-subcategory nav-sparkling"><a href="/collections/all/sparkling">sparkling</a></li>
        <li class="nav-subcategory nav-stamps"><a href="/collections/all/stamps">stamps</a></li>
        <li class="nav-subcategory nav-tiny"><a href="/collections/all/tiny">tiny</a></li>
        <li class="nav-subcategory-last nav-travel"><a href="/collections/all/travel">travel</a></li>
       </ul>
      </li>
      <li id="nav-stationery" class="nav-item"><a href="/collections/all">stationery</a>
       <ul class="drop3">
        <li class="nav-subcategory nav-subcategory-first nav-stationery"><a href="/collections/all/stationery">view all</a></li>
        <li class="nav-subcategory nav-bookmarks"><a href="/collections/all/bookmarks">bookmarks</a></li>
        <li class="nav-subcategory nav-cards-and-letters"><a href="/collections/all/cards-and-letters">cards and letters</a></li>
        <li class="nav-subcategory nav-diaries-and-notebooks"><a href="/collections/all/diaries-and-notebooks">diaries and notebooks</a></li>
        <li class="nav-subcategory nav-pencil-cases"><a href="/collections/all/pencil-cases">pencil cases</a></li>
        <li class="nav-subcategory nav-pens-and-pencils"><a href="/collections/all/pens-and-pencils">pens and pencils</a></li>
        <li class="nav-subcategory nav-sticky-notes-and-memos"><a href="/collections/all/sticky-notes-and-memos">sticky notes and memos</a></li>
        <li class="nav-subcategory-last  nav-tapes"><a href="/collections/all/tapes">tapes</a></li>
       </ul>
      </li>
      <li id="nav-accessories" class="nav-item"><a href="/collections/all">accessories</a>
       <ul class="drop4">
        <li class="nav-subcategory nav-subcategory-first nav-accessories"><a href="/collections/all/accessories">view all</a></li>
        <li class="nav-subcategory nav-adventure"><a href="/collections/all/adventure">adventure</a></li>
        <li class="nav-subcategory nav-bags-and-pouches"><a href="/collections/all/bags-and-pouches">bags and pouches</a></li>
        <li class="nav-subcategory nav-beauty"><a href="/collections/all/beauty">beauty</a></li>
        <li class="nav-subcategory nav-charms-and-straps"><a href="/collections/all/charms-and-straps">charms and straps</a></li>
        <li class="nav-subcategory-last nav-phone-cases"><a href="/collections/all/phone-cases">phone cases</a></li>
       </ul>
      </li>
      <li class="nav-item"><a href="/collections/all">all products</a></li>
      <li class="nav-item"><a href="http://stickerstack.tumblr.com">blog</a></li>
      <li class="nav-item"><a href="/pages/about">about</a></li>
      <li id="nav-customer-service" class="nav-category-last nav-item"><a href="/collections/all">customer service</a>
       <ul class="drop2">
        <li class="nav-subcategory nav-subcategory-first nav-contact"><a href="/pages/contact">contact</a></li>
        <li class="nav-subcategory nav-faqs"><a href="/pages/faqs">faqs</a></li>
        <li class="nav-subcategory-last nav-delivery-returns"><a href="/pages/delivery-returns">delivery and returns</a></li>
       </ul>
      </li>
     </ul>
    </nav>
    CSS
    Code:
    /* --- CSS reset --- */
     html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after, q:before, q:after {
        content:'';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    /* --- global styles --- */
     a {
        color: #343434;
        text-decoration: none;
    }
    a:hover {
        color: #ff0099;
    }
    
    /* navigation */
     nav {
        float: left;
        padding: 0px;
        margin: 0 20px 20px 0;
        line-height: 13px;
    }
    .nav-item {
        margin-bottom: 3px;
        background-color: #f6f6f6;
    }
    .nav-item > a {
        display: block;
        width: 180px;
        padding: 12px 10px;
        background-color: #f6f6f6;
    }
    .nav-item > a:hover, .nav-plus:hover {
        background-color: #e0e0e0;
    }
    .nav-minus a:hover {
        background-color: #f6f6f6;
    }
    nav li {
        font-family:"tablet-gothic", sans-serif;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
    }
    nav li a {
        color: #222222;
    }
    .nav-category-last {
        border-bottom: none;
    }
    .nav-plus > a {
        background: url(http://cdn.shopify.com/s/files/1/0200/9900/t/6/assets/icon_plus.png?14726) no-repeat;
        background-position: 178px 12px;
        background-color: #f6f6f6;
    }
    .nav-minus > a, .nav-minus:hover {
        background: url(http://cdn.shopify.com/s/files/1/0200/9900/t/6/assets/icon_minus.png?14726) no-repeat;
        background-position: 178px 12px;
        background-color: #f6f6f6;
    }
    .nav-minus > a {
        padding-bottom: 10px;
    }
    nav li ul {
        display: none;
    }
    .nav-subcategory {
        padding: 3px 0;
        border: none;
        font-family:"Nimbus-sans", sans-serif;
        font-size: 12px;
        font-weight: 300;
        text-transform: none;
    }
    .nav-subcategory a, .nav-subcategory-last a {
        color: #343434;
        display: block;
        padding-left: 10px;
    }
    .nav-subcategory a:hover, .nav-subcategory-last a:hover {
        color: #ff0099;
    }
    .nav-subcategory-first {
        font-weight: 300;
        padding-top: 0;
    }
    .nav-subcategory-last {
        padding: 3px 0 0 0;
        border: none;
        padding-bottom: 10px;
        font-family:"Nimbus-sans", sans-serif;
        font-size: 12px;
        font-weight: 300;
        text-transform: none;
    }
    JS
    Code:
    //ON PAGE LOAD
    $(document).ready(function () {
        $('.drop').hide();
        $('#nav-theme a').removeClass("open");
        $("#nav-theme").addClass("nav-plus");
        $('.drop2').hide();
        $("#nav-customer-service a").removeClass("open");
        $("#nav-customer-service").addClass("nav-plus");
        $('.drop3').hide();
        $('#nav-stationery a').removeClass("open");
        $("#nav-stationery").addClass("nav-plus");
        $('.drop4').hide();
        $('#nav-accessories a').removeClass("open");
        $("#nav-accessories").addClass("nav-plus");
    });
    
    //OPEN AND CLOSE MENUS
    //for stickers
    $(document).ready(function () {
        $("#nav-theme > a").on("click", function (e) {
            if ($(this).parent().has("ul")) {
                e.preventDefault();
            }
    
            if (!$(this).hasClass("open")) {
    
                // open our new menu and add the open class
                $(this).next("ul").slideDown(350);
                $(this).addClass("open");
                $("#nav-theme").addClass("nav-minus");
                $("#nav-theme").removeClass("nav-plus");
            } else if ($(this).hasClass("open")) {
                $(this).removeClass("open");
                $(this).next("ul").slideUp(350);
                $("#nav-theme").addClass("nav-plus");
                $("#nav-theme").removeClass("nav-minus");
            }
        });
    });
    
    //for stationery
    $(document).ready(function () {
        $("#nav-stationery > a").on("click", function (e) {
            if ($(this).parent().has("ul")) {
                e.preventDefault();
            }
    
            if (!$(this).hasClass("open")) {
    
                // open our new menu and add the open class
                $(this).next("ul").slideDown(350);
                $(this).addClass("open");
                $("#nav-stationery").addClass("nav-minus");
                $("#nav-stationery").removeClass("nav-plus");
            } else if ($(this).hasClass("open")) {
                $(this).removeClass("open");
                $(this).next("ul").slideUp(350);
                $("#nav-stationery").addClass("nav-plus");
                $("#nav-stationery").removeClass("nav-minus");
            }
        });
    });
    
    //for accessories
    $(document).ready(function () {
        $("#nav-accessories > a").on("click", function (e) {
            if ($(this).parent().has("ul")) {
                e.preventDefault();
            }
    
            if (!$(this).hasClass("open")) {
    
                // open our new menu and add the open class
                $(this).next("ul").slideDown(350);
                $(this).addClass("open");
                $("#nav-accessories").addClass("nav-minus");
                $("#nav-accessories").removeClass("nav-plus");
            } else if ($(this).hasClass("open")) {
                $(this).removeClass("open");
                $(this).next("ul").slideUp(350);
                $("#nav-accessories").addClass("nav-plus");
                $("#nav-accessories").removeClass("nav-minus");
            }
        });
    });
    
    //for faqs
    $(document).ready(function () {
        $("#nav-customer-service > a").on("click", function (e) {
            if ($(this).parent().has("ul")) {
                e.preventDefault();
            }
    
            if (!$(this).hasClass("open")) {
    
                // open our new menu and add the open class
                $(this).next("ul").slideDown(350);
                $(this).addClass("open");
                $("#nav-customer-service").addClass("nav-minus");
                $("#nav-customer-service").removeClass("nav-plus");
            } else if ($(this).hasClass("open")) {
                $(this).removeClass("open");
                $(this).next("ul").slideUp(350);
                $("#nav-customer-service").addClass("nav-plus");
                $("#nav-customer-service").removeClass("nav-minus");
            }
        });
    });

  • #5
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @DanInMa

    I am really surprised to hear this...please could you explain exactly what is happening and what you mean by "css files from the shopify site are being aborted"?

    I have tested my site over multiple browsers and platform, and all have been okay so far. As I said in my question, I am hosted on Shopify (an ecommerce platform), which is why my stuff is coming from there. Might have the problems you encountered have been temporary?

    Thanks again for your time.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    JFWIW, site works fine for me, no lag on :hover, in FF, Chrome and Safari 5 all on W7. All the css assets load fine. Transient network or server issues perhaps?
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #7
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @ SB65

    Thanks for taking the time to check. Glad to know all is well on W7.

    I think the problem is related to either Safari rather than the network. I'm going to have another check tonight with a fresh face and see what I can do.

    Of course, if I discover the problem, I'll post the solution. Cheers.

  • #8
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have spent too long trying to fix this, so I have given up.

    I have found a satisfactory hack, that prevents the problem from occurring.

    By applying a CSS animation to the element in question. In this instance, I changed

    Code:
    .nav-item > a {
        display: block;
        width: 180px;
        padding: 12px 10px;
        background-color: #f6f6f6;
    }
    to

    Code:
    .nav-item > a {
        display: block;
        width: 180px;
        padding: 12px 10px;
        background-color: #f6f6f6;
        -webkit-transition: all 10ms ease;
        -moz-transition: all 10ms ease;
        -ms-transition: all 10ms ease;
        transition: all 10ms ease;
    }
    I know it's a hack, but it does fix the issue I was having. The 10 millisecond animation is basically imperceptible, but for whatever reason, it stops the lag.

    I thought it might be because it forces the browser to use hardware acceleration, but I don't believe this is the case, as the lag remains when using other methods to do the same.

    I won't mark this as solved, just in case anyone can shed any more light on the actual cause of the issue.

    Cheers.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •