Grow your CSS skills. Land your dream job.

Can i stop “flickering” on :hover?

  • # June 3, 2013 at 4:39 am

    Howdy yall, so i was going to participate in that shopping cart weekly challenge then realized i really wont have the time. However, i came up with a cool little shopping cart icon/design thing that i think is somewhat nifty.

    The problem i am having is that when i hover over the icon, the page “flickers” white. I have some JS controlling the icon but with JS disabled it still happens and JS is not touching the hover state.

    I am thinking it may have something to do with transform and scale?

    div.cart:hover {
    -webkit-transform:scale(1.106);
    -moz-transform:scale(1.106);
    transform:scale(1.106);
    }

    Has anyone ran into this issue previously?

    Here is my CodePen. It is NOT part of the contest, just saying…

    # June 3, 2013 at 6:00 am

    You should test it outside CodePen because sometimes CodePen causes the flickering. Too bad you’re not participating, I was looking forward to your entry :P

    # June 3, 2013 at 7:01 am

    @CrocoDillon, Hey good call man, I used JSFiddle to test (before i went local) and no flickering. I am going to try and test with JS action rather than CSS.

    Does anyone know the reason for the flickering?

    # June 3, 2013 at 7:14 am

    Update #1: Manipulating the hover with JavaScript still causes the screen to flicker white.

    Trying: Removing element transitions to see if that is the problem, then trying on a standard block element.

    Update #2:

    Original Code: (Lot’s of flicker on hover)

    div.cart {
    -webkit-transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -moz-transition: -moz-transform 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -o-transition: -o-transform 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    transition: transform 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    }

    Changed To: (Still flickers, cut back of about 50%)

    div.cart {
    -webkit-transition: -webkit-transform 200ms ease-in-out;
    -moz-transition: -moz-transform 200ms ease-in-out;
    -o-transition: -o-transform 200ms ease-in-out;
    transition: transform 200ms ease-in-out;
    }
    # June 3, 2013 at 7:30 am

    I tested it on Firefox, both an hour ago and now. No flickering at all, hovering, clicking, selecting, resizing the browser, Ctrl-+ing – nothing causes the flickering, not on the Firefox, that is.

    EDIT: In Chrome :hover is not a problem, clicking causes hell of a flickering though :O (I just noticed that’s because you disabled the cubic-bezier transform)

    > I have some JS controlling the icon but with JS disabled it still happens and JS is not touching the hover state.

    Well, I tried disabling the JS anyways and… flickering stops :D

    # June 3, 2013 at 7:33 am

    `-webkit-transition: -moz-transform 200ms ease-in-out;` this gotta be a mistake :P

    Maybe the one with the cubic-bezier doesn’t like values above 1?

    # June 3, 2013 at 7:43 am

    @jimmyniceguy, hey thanks for running some tests, yeah i am running Latest Chrome (Win7) and when i had original cubic-bezier and that is the browser i am having problems with (i should have mentioned that).

    I did fix it by changing the easing type, but the spinning (onClick) wasn’t flickering for me… *If it’s not one thing, it’s another lol*
    I will run a test but the flickering is probably because of the GODDAMN SVG! Since firefox wont allow me to use icon fonts on my server that is what i resorted to, just an SVG.

    @CrocoDillon, yeah man totally a copy/paste/edit-in-between mistake. Possibly doesn’t like the value above 1, i didnt even try just setting the values to 1. Ill try that.

    Thanks guys for helping me out.

    # June 3, 2013 at 7:45 am

    Cubic-bezier is disabled, yet it still flickers while :active.

    It’s probably one of those lovely and whimsical CodePen traits :D

    No problem, mate!

    Nah, not SVG-related, I replaced the cart with Baby Cage’s face – same effect :D

    # June 3, 2013 at 7:52 am

    @jimmyniceguy, yeah agreed! like i mentioned before, i copied and pasted it inside of JSFiddle and there was no flickering. I am really curious to see what is causing it though so than i could write a plugin for CodePen to prevent it lol…

    Actually, it is kind of weird, if you look at the jsFiddle i made, the SVG doesn’t even show up lol..

    I going to have to create some conditionals for online text editors i use lol..

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".