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.
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.
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.
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 😀
Does this happen also if you put this in your css?
Thanks @d4z_c0nf – but that doesn’t fix it.
What browser gives you this issue?
Can you inspect the image and tell me the top property value?
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.
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>
Yes!
And this is when the error occurs?
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?
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
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>
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?
Ah, do you have also this running?
Yes. How did you deduce that? Should I disable it?
