Can i stop “flickering” on :hover?

[JohnMotylJr]

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…

[CrocoDillon]

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

[JohnMotylJr]

@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?

[JohnMotylJr]

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;

}

[jimmy]

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

[CrocoDillon]

`-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?

[JohnMotylJr]

@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.

[jimmy]

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

[JohnMotylJr]

@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..

[Author]

Posts