Really annoying image slider problem in Firefox

  • Resolved razorpig

    (@mjtilbury)


    11 years, 6 months ago

    Hey all, if you look at this page with Firefox..

    https://www.centrepiecedesign.com/coffee-table/

    ..you might notice a really annoying little problem with the image slider. As the image fades, the 1px white border on the right gets a little larger (2px I think), then at the end of the fade the image ‘clicks’ back in to place :-/ ??? It’s not a smooth transition. This doesn’t happen in Chrome or IE. Any ideas? I’m totally lost on this one!

Viewing 10 replies - 1 through 10 (of 10 total)

  • I don’t see that happening in Firefox 23.0.1 on Windows.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I see the issue and to help us debug it could you provide a pause function on the slider?

    Thread Starter razorpig

    (@mjtilbury)

    Thanks Andrew…I couldn’t see a PAUSE option on the slider but I’ve stopped it from autoplaying. Is this OK?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yep that’s great thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It looks like an issue with when some Nivoslider adds the CSS ‘height’ style every time an image is made visible. I guess some images don’t originally have the height that Nivoslider adds, therefore when Nivoslider adds it you can see the image jump.

    To resolve this you could add CSS that sets all images to be 290px to begin with:

    .theme-default .nivoSlider img { height: 290px !important; }

    I had to use important to override Nivoslider’s inline CSS.

    Thread Starter razorpig

    (@mjtilbury)

    Amazing! thanks Andrew, that’s genius ?? What would I do without this forum??

    I did the same for the width as well…all seems to be working smoothly now.

    MUCH appreciated.

    Thread Starter razorpig

    (@mjtilbury)

    Oh dear ?? It’s resized the slider images on my home page too.

    I’ve cut out the code but it has’t fixed it. Will I need to upload those images again?

    Any way to apply to the fix to just the one slider?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Each page has a unique CSS selector in the <body> element of your site.
    The unique CSS selector of the page you linked in the first post of your thread is, ‘page-id-14’.

    So to apply that CSS specific to that page, you’d do:

    .page-id-14 .theme-default .nivoSlider img { height: 290px !important; }

    Thread Starter razorpig

    (@mjtilbury)

    Perfect ?? and many thanks for the explanation. I have a lot to learn…

    Thanks for this solution ?.?.

    I was having an issue where after the first slide the paragraph in the caption would jump down 1px or so. When it came back to the first image it was fine again so it only happened when the page loaded first.

    I added the height to CSS for the slider image and that has fixed it.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Really annoying image slider problem in Firefox’ is closed to new replies.