Strange behavior with a jQuery slider only in Google Chrome - layout/CSS problem?
Anyone familiar with a free jQuery carousel called "Flexslider" developed by WooThemes? I've implemented it on a Wordpress site for a client and it displays strange behavior only in Google Chrome. I can't duplicate this behavior in IE8, IE9, FF15, or Safari for Windows. I'm most baffled by Safari since I expect the behavior to be very similar to its webkit cousin Chrome.
Anyway, whenever a transition with Flexslider occurs in a small sidebar container, the large header on the main section "grows" and retracts, as if it's getting pushed around by the hidden containers sliding by underneath. It's tough to explain, but it can be seen here using Chrome:
Just noticed the problem doesn't occur if the Flexslider animation is switched from "slide" to "fade".
The animations manipulate CSS in very different ways. Fade basically toggles the class, display and opacity values of the list items whereas slide changes values of the proprietary -webkit-transform translate3d property on the parent ul. Most sliders I've seen use simple positioning to move the elements, rather than -webkit-transform.
I'd go for fade. It grabs the attention but is less visually annoying.
Thanks for your help, everyone. Changing the font size to 48px does solve the problem, but it's not a solid long-term solution. The client is pretty set on a sliding animation. I would write my own but I don't have the time, so I tried this one. Any recommendations on jQuery alternatives to Flexslider?
Yes, and the problem with Chrome in Windows that I previously saw (the large header text in the h1 tag in another container shifting/growing + shrinking) does not occur with bxSlider, even at fonts above 48px. As always, sitepoint is a great resource for me and I truly appreciate the help you've given me. Thanks again.