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:

http://test.blackcypresscapital.com/.../germinations/

On that particular page, you’ll notice the text “ISM CONTRACTS” will change appearance slightly during the slide transition. I’m not sure what’s causing it so I have no idea where to start. Please let me know if inclusion of CSS/HTML/javascript is helpful in diagnosing.

Thank you!

Here, it looks more like the characters of the H1 are growing and shrinking during the transition, rather than being shifted.

It only seems to occur when the H1 is set to a font-size between 49px and 328px so, if all else fails, you could use 48px, but it’ll still happen when the user zooms above 100%.

There are HTML and CSS validation errors, so it may help to fix those.

I can’t see any problem in Chrome at all.

Is that on Mac Ralph? I’m seeing it in Windows.

Yes indeed. I should have made that clear. :slight_smile:

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?

Did you see Victorinox’s statement about slide/fade?

I’m quite a fan of bxSlider at the moment.

bxSlider has been implemented on the test site. Thanks for the input. I did see Victorinox’s statement about slide/fade, but the client really wants slide, so that’s what I will have to do.

Cool. So is it working as you want now? Looks good to me in Chrome (Mac).

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.