SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Enthusiast phinole's Avatar
    Join Date
    Oct 2008
    Location
    Vero Beach, FL
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

  2. #2
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    I can't see any problem in Chrome at all.

  4. #4
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Is that on Mac Ralph? I'm seeing it in Windows.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Victorinox View Post
    Is that on Mac Ralph? I'm seeing it in Windows.
    Yes indeed. I should have made that clear.

  6. #6
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Enthusiast phinole's Avatar
    Join Date
    Oct 2008
    Location
    Vero Beach, FL
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Did you see Victorinox's statement about slide/fade?

    Quote Originally Posted by phinole View Post
    Any recommendations on jQuery alternatives to Flexslider?
    I'm quite a fan of bxSlider at the moment.

  9. #9
    SitePoint Enthusiast phinole's Avatar
    Join Date
    Oct 2008
    Location
    Vero Beach, FL
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by phinole View Post
    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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •