Hi,
I’m using the SiteOrigin Slider widget, but am noticing some strange image-sizing issues. Basically the slider appears to expand slightly height-wise as the second image is shown, and from that point on 2 copies of each image are visible – one (applied as the background image of the slider element) slightly larger than the other (which is an child of an element linking to the related post for that image), resulting in an overlap of these 2 identical (but differently sized image). This effect may or may not be visible, depending on the image itself (a number of our slider images have fairly uniform lower boundaries, so this effect isn’t really visible – but for some images it can be quite obvious).
If I set the visibility attribute of the element to ‘hidden’, then the mis-sizing is no longer visible, but the images no longer link to the relevant posts – so not really an option.
I’m hoping that this is just a simple fix, due to me mis-using the slider widget in some way – but have tried a range of different settings to no effect. If anyone has any ideas or explanation as to why this is happening – and in particular anything I can do to fix this – then that would be greatly appreciated!
Many thanks!
Hi Michael
Very sorry about the late reply. We work through a prioritized forum queue, and unfortunately it’s taken us some time to get to your thread.
https://siteorigin.com/about/forum-thread-prioritization/
Because it’s been a while since you posted this, would you mind letting us know if you still need help? If so, we’ll jump right in.
No worries Andrew,
Yes, we’re still having the issue with the slider widget. At the moment we’re just running with it as is, but it’s definitely not ideal.
Thanks,
Michael
Thanks for the update. This might be a theme specific issue, first time we’ve seen it. Please, try the following at Appearance > Custom CSS to hotfix:
/* SiteOrigin Slider Widget */ .so-widget-sow-slider img { display:block !important; }Let us know how that goes.
Thanks
Hi Andrew,
That hotfix seems to have solved the issue we were seeing with the 2 images overlaying each other – thanks!
We’re still seeing the strange resizing issue (where the slider expands slightly height-wise and the second image loads in – but this is fairly minor.
We’re using a SiteOrigin theme (Origami Premium) as a base.
Could you perhaps send the browser details you’re testing in. We’re not able to replicate the jump/expansion issue. Thanks :)
No worries Andrew, and thanks again for your assistance with this.
I see the resizing issue using both Google Chrome (44.0.2403.155) and Safari (8.0.8) on OSX Yosemite (10.10.5). I’ve also seen this on Chrome for Windows 7. It only seems to occur the first time the slider transitions from the first image to the second image – subsequent transitions, including from the first to second images, don’t show the resizing. All the images are identically sized.
I’ve screen-captured a video showing the relevant transition, if there’s any way of getting this file to you?
Michael
Sounds like the best way forward. Depending on the file format you could perhaps upload to your Media Library and send the link. If have Dropbox you could perhaps upload to your Public folder and share the link. You can delete once we’re done.
Thanks Andrew,
Movie should be available from: https://drive.google.com/file/d/0ByLcJhaIfpBKc3NrdmJNb0o4TUU/view?usp=sharing
Thanks for taking the time to report. Strangely enough I can’t see this in OS X Chrome but I can see it between 1-2 seconds in the video. I’m not sure there is anything we can do to resolve. I think it has to do with the height change as the frames transition. Greg took a look too. Sorry, wish we had more on this.
No worries Andrew – thanks for all your help.
For sure, thanks for your understanding.
Hello,
I had the same resizing issue between the first and second image transition, and I would like to share the solution.
As far as I can see, the slider height is based on a non-visible element with class “cycle-sentinel”. Being position: static, it is still influenced by parent’s padding. Parent is a ul, with a default padding of 40px for webkit browsers; removing this padding solves the issue.
TL;DR:
Add to your theme CSS this instruction:
ul.sow-slider-images { padding:0; }Hope this helps!
Best regards
Luigi