Give help. Get help.
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…
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
@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?
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;
}
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
`-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?
@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.
@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..
You must be logged in to reply to this topic.