Streaming live at 10am (PST)

Custom blur breaks tab animation


#1

Hi everyone, I've added a blur effect to a div, but now it seems to break the animation on my tab buttons. You'll see that the tab width jumps after it has been clicked instead of a smooth transition. I've tested it and it seems to work if I remove the blur effect from the Custom Code section.

Kind of difficult to explain, so maybe just check it out here: http://demoslider1.webflow.io
This is how it should work without the custom blur code: http://thispattern.com/slider/demoslider

Any ideas on this?

PS: For reference, you can see the Product Slider in full here: thispattern.com

Steyn


#2

They function identically on my machine. Using Chrome on a Mid-2012 MacBook Pro. Although, to be honest, I don't see a difference between the two pages at all outside of the fact that on one the background slides out and on the other it just fades.

Is it possible your computer is being overwhelmed by the processes and is just unable to display the tab animation smoothly?


#3

Hmm... Intersting. It could be Safari. Not so sure it's my computer though. It's pretty strong.

Yes, they are identical. Except for the bug I mentioned. There's 2 states here:
1.Hover and tab protrudes by 10px to a width of 310px.
2.Click and it protrudes to a width of 320px to become active state.

All of this animation happens with a smooth transition. But the code seems to break the transition so it jumps to 320px width after clicked.

I'll check it when I'm in front of my desktop again. Cant test that breakpoint on my phone.


#4

Checking in. Both sliders appear to be the same to me, and I don't notice any width jumps.

Windows 10, Chrome Version 51.0.2700.0 dev-m


#5

Yes, I checked now. Safari seems to be the problem. Works fine on Chrome and Firefox...

Silly Safari. :persevere:


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.