WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Displaced slider bug? (20 posts)

  1. chappie
    Member
    Posted 2 months ago #

    I may have found a bug. When testing the responsiveness of my layout, sometimes (maybe one time in four), my slider is displaced upwards so that the top third of the image is hidden. This is a framed slider but the problem also occurs with full-width sliders.

    The fix was to uncheck the "Enable/disable slider's slides centering on any devices" option in Customizr settings - which is a loss.

  2. d4z_c0nf
    Member
    Posted 2 months ago #

    If you reload the page the slide is been centered again right?
    The only thing, in that code, that could 'cause that (and I don't think is your case 'cause your "error" is too big), is that it makes the "centering" just when the container's width differs of 50px from the last adjustment, it's just the duty to pay to avoid continual calculations and replacements (https://api.jquery.com/resize/).
    Said so, your problem could be tied with those other problems you have while resizing the window, and also there don't know what "we" can do about that :(

    p.s.
    I'm not saying it doesn't depend on that option, of course it depends on that, 'cause it makes some calculations when resizing the window, and replaces the slide to center it in its container.

  3. d4z_c0nf
    Member
    Posted 2 months ago #

    Does this happen also if you put this in your css? :

    #customizr-slider img {
        -moz-transition: none ;
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
    }

    Just to see if this problem you have is with the css transitions.

  4. chappie
    Member
    Posted 2 months ago #

    If you reload the page the slide is been centered again right?

    Yep.

    your problem could be tied with those other problems you have while resizing the window

    But I've disabled the offensive piece of CSS that was causing those other problems.

  5. d4z_c0nf
    Member
    Posted 2 months ago #

    It was causing problems in the header, but clearly you had/have problems with transitions. If you had told me you saw jumping spans while resizing (crossing responsive thresholds) it was normal. Your problems are those freezes. And those aren't normal :D

  6. chappie
    Member
    Posted 2 months ago #

    Does this happen also if you put this in your css?

    Thanks @d4z_c0nf - but that doesn't fix it.

  7. d4z_c0nf
    Member
    Posted 2 months ago #

    What browser gives you this issue?
    Can you inspect the image and tell me the top property value?

  8. chappie
    Member
    Posted 2 months ago #

    Your problems are those freezes. And those aren't normal

    But now I know what caused the freezes so I don't have them any more.

  9. chappie
    Member
    Posted 2 months ago #

    The problem happens in all my (recently updated) browsers: Safari, Firefox and Chrome (on a Mac).

    Is this what you want?:

    <div class="carousel-inner center-slides-enabled">
    
                                      <div class="item active slide-3355">
    
                  <div class="carousel-image slider"><img width="1170" height="500" src="http://localhost:8888/sitename/wp-content/uploads/2014/04/buy1170.gif" class="attachment-slider v-center" alt="buy1170" style="width: 100%; max-width: 100%; left: 0px; height: auto; top: -9px; position: relative; "></div>
                  <span class="slider edit-link btn btn-inverse"><a class="post-edit-link" href="http://localhost:8888/sitename/wp-admin/post.php?post=3355&action=edit#slider_sectionid" title="Edit" target="_blank">Edit</a></span>
                </div><!-- /.item -->
    
            </div>
  10. d4z_c0nf
    Member
    Posted 2 months ago #

    Yes!
    And this is when the error occurs?

  11. chappie
    Member
    Posted 2 months ago #

    Nope, that was with the centering option turned off. This is what I get with it turned on and with only 2/3rds of the slider showing:

    <div class="carousel-inner center-slides-enabled">
    
                                      <div class="item active slide-3355">
    
                  <div class="carousel-image slider"><img width="1170" height="500" src="http://localhost:8888/sitename/wp-content/uploads/2014/04/buy1170.gif" class="attachment-slider v-center" alt="buy1170" style="position: relative; width: 100%; max-width: 100%; left: 0px; height: auto; top: -0.20085470085470547px; "></div>
                  <span class="slider edit-link btn btn-inverse"><a class="post-edit-link" href="http://localhost:8888/sitename/wp-admin/post.php?post=3355&action=edit#slider_sectionid" title="Edit" target="_blank">Edit</a></span>
                </div><!-- /.item -->
    
                </div>

    Is it any different?

  12. d4z_c0nf
    Member
    Posted 2 months ago #

    Then you can see from the above code that the image should be moved upwards just of 0.2px. So how can we explain the error you show in your screenshot?.
    Does this happen also with the customizr theme?

    p.s.
    Just to be honest, it's impossible that the first code you gave me was when you had that option unchecked, 'cause top property (and v-center class and other stuff) is set in that script

  13. chappie
    Member
    Posted 2 months ago #

    it's impossible that the first code you gave me was when you had that option unchecked

    Hm, I thought it was unchecked. But it was definitely unchecked for this inspection:

    <div id="customizr-slider" class="container carousel slide">
    
            <div class="carousel-inner">
    
                                      <div class="item active slide-3355">
    
                  <div class="carousel-image slider"><img width="1170" height="500" src="http://localhost:8888/sitename/wp-content/uploads/2014/04/buy1170.gif" class="attachment-slider" alt="buy1170" style="top: -58px; position: relative; "></div>
                  <span class="slider edit-link btn btn-inverse"><a class="post-edit-link" href="http://localhost:8888/sitename/wp-admin/post.php?post=3355&action=edit#slider_sectionid" title="Edit" target="_blank">Edit</a></span>
                </div><!-- /.item -->
    
            </div><!-- /.carousel-inner -->
    
          </div>
  14. d4z_c0nf
    Member
    Posted 2 months ago #

    Well it's strange, do you have some other javascript which is working on sliders images? 'cause really:
    style="top: -58px; position: relative;
    Who sets this?

  15. d4z_c0nf
    Member
    Posted 2 months ago #

  16. chappie
    Member
    Posted 2 months ago #

    Ah, do you have also this running?

    Yes. How did you deduce that? Should I disable it?

  17. d4z_c0nf
    Member
    Posted 2 months ago #

    I deduced that because of top and position properties, knowing that were placed by a script I guessed you used nikeo's one.
    Yes you have to disable it, there's no reason to have them working both.
    But don't know if this can solve your problem.

  18. chappie
    Member
    Posted 2 months ago #

    Eureka!

    Deleting the php and re-enabling the centering option works just fine. Thanks so much for your help.

    I may not be the only novice who failed to twig that the new centering option duplicated the older centering script. Could I suggest to snippet authors that any snippets which have been superseded by adding functionality into a theme update could have a note added to this effect?

  19. d4z_c0nf
    Member
    Posted 2 months ago #

    Yep is a good suggestion, but you know nikeo is very busy, also how can he control how many are using it? :D
    Anyway is something that could happen, but stop calling you a novice, otherwise you will end up to convince yourself, of course you'll never convince me :P

  20. ElectricFeet
    Member
    Posted 2 months ago #

    I may not be the only novice who failed to twig that the new centering option duplicated the older centering script. Could I suggest to snippet authors that any snippets which have been superseded by adding functionality into a theme update could have a note added to this effect?

    Nicolas has added a note to this one. Thanks for suggesting it.

Reply

You must log in to post.

About this Theme

About this Topic