Topic: Slides transition in iPad/iPhone

I'm seeing jerky transition between slides when viewing the slideshow in iPad or iPhone.  This does not occur on every transition but sometimes you could see an image flashes for a split second before it moves to the next slide. This does not happen in the flash player.

Here's an example of a slideshow generated with the html5 shell using Soundslides v1.9.5 that demonstrate the issue.

Any help is greatly appreciated.



Re: Slides transition in iPad/iPhone

Hi David,

Sorry you are experiencing the transition bug on your iPad/iPhone with the HTML5 JS Player. Unfortunately, this is the first time we've seen this problem and we'll need some time to investigate the issue further.

We will let you know what we find asap.

Best regards,


Re: Slides transition in iPad/iPhone


I believe we have narrowed down the issue to a minor bug in the javascript file. Could you please download the zip file from this url

http://media.soundslides.com/files/foru … des.js.zip

unzip on your local computer and replace the javascript at

http://lifeuncommonphotography.com/Laur … dslides.js

If that works for you, you can also replace the soundslides.js file in your iOS_html5 shell in the Soundslides Application folder which will correct this issue for all future exported slideshows.

We will incorporate this fix into the next minor release. We could only duplicate this issue for a slideshow with hard cuts.

Please let me know if you have any other issues.

Best regards,


Re: Slides transition in iPad/iPhone


I have applied the fix and it seemed to do the trick! Thank you so much for your prompt response and resolution.
I will look forward to having this fix in the next release.



Re: Slides transition in iPad/iPhone

I had the same problem and the javascript file fixed the slide transition problem. However there is another problem that I have when my Soundslides are viewed with an iPad. There is a black bar across the bottom that does not appear in a browser. The right edge is cropped a bit as well.

When viewed with the Chrome browser, the image does not fill the background.

It seems to me there are still problems with this shell.

http://www.storytellingonline.info/audi … ow-spirit/

What do you suggest?


Re: Slides transition in iPad/iPhone

Hi Jim,

I'm sorry for the issue. We are seeing the black bar in the iPad version of Safari as well and will investigate and get back to you.

The slide show appears normally here in desktop versions of Chrome, IE, Firefox, and Safari. From your description, I think it may be an issue with your web browser's zoom function. The zoom function is problematic with the Adobe Flash plug-in, so you'll need to pull down the "View" menu in your browser to "Zoom," then "Reset" or "100%" to make sure you are viewing the page at standard size. The slide show should then appear as intended. The zoom function is specific to a particular page, which is why you might see this issue online and not on your hard drive, for instance. It is specific to your computer and does not affect the way your viewers see the slide show.



Re: Slides transition in iPad/iPhone

Thank you. The zoom was not at 100 percent and when I fixed that the problem of display in the Chrome browser went away.

I look forward to your investigation of the blackball. I usually use the Easyembed plugin for Wordpress but I tried with just the iframe and not using easy embed and got the black bar on the iPad.



Re: Slides transition in iPad/iPhone

Hi Jim,

The issue with the black bar appears to be caused by a CSS style overriding the bottom margins of the iframe container.

Take a look at line 838 at the following CSS file in your wordpress themes folder
http://www.storytellingonline.info/wp-c … /style.css

.entry-content embed, .entry-content iframe, .entry-content object, .entry-content video {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;

The margin-bottom properties are being applied to the iframe container. You would likely want to apply the margins to the parent container outside of the iframe or a different element.

Hope that helps.
Best regards,


Re: Slides transition in iPad/iPhone

This is now in my child theme style.css

.entry-content embed,
.entry-content iframe,
.entry-content object,
.entry-content video {
    margin-bottom: 0px;
    margin-bottom: 0rem;

And the black bar still exists on iPad. I copied this from the parent theme style.css and set the values to zero.



Re: Slides transition in iPad/iPhone

Hi Jim,

Unfortunately there still seems to be a styling issue that I can't immediately see when looking at your page. The easiest fix is to probably just remove the inline styling on the iframe.html page located at the following path

http://storytellingonline.info/audiosli … frame.html

If you can open that file on your server and edit the follow code (line 9) to remove the background-color for the body. Removing the body background color should remove the black bar on the page that you're embedding the audio slideshow on.


Let us know if that fixes the issues.


11 (edited by jwbrown 2012-10-20 13:59:10)

Re: Slides transition in iPad/iPhone

That did the trick. Thank you.

There is a very minor problem still left that may be a problem with the javascript.

With the background color removed from iframe.html and when viewed in a normal browser, there is a 2 px padding around the picture since this is the easiest way I have found to define a high key picture shown on a white page. The padding acts as a hairline black rule that defines the picture area.

The rule shows still shows when viewed on a laptop. On the iPad, the right-side rule is missing and the s in credits is slightly cropped. I don't know if this a WordPress Problem, a problem with embed code the Soundslides utility provides or something else, perhaps in the coding of the html5 shell coding.

It is a minor problem compared to the large black bar, but I would like for you to think about a possible solution to that. In other words I really want the html5 display to be the same as a normal browser display and it is almost there.


Re: Slides transition in iPad/iPhone

Hi Jim,

Glad that did the trick.

I took another look at your blog and I'm 99% sure the issue is due to an issue in the theme CSS. Unfortunately I can't say for certain as we don't have any wordpress CSS experts on staff.

I would recommend having the web developer who created your theme take a look at the issue and see if they can spot the CSS that is causing the right-side rule to be missing as well as the "s" being cropped.

Sorry we can't be of more assistance on this issue.

Best regards


Re: Slides transition in iPad/iPhone

Okay, thanks. This is the default theme Twenty-Twelve. I will try to track down how to contact whoever is responsible for the theme.


Re: Slides transition in iPad/iPhone

I downloaded Soundslides Plus on 3/19/13 and seem to be experience this problem.  Should I troubleshoot the same way as above?


Re: Slides transition in iPad/iPhone

I'm sorry for the issue. I'll be in touch by email with a solution.



Re: Slides transition in iPad/iPhone

Same issue. Used the soundslides.js fix for a while which worked, now the last 2 slideshows I've created have the problem again. Not sure what has changed, if anything, but can provide more info if needed.


Re: Slides transition in iPad/iPhone

We are working on a permanent fix for this issue. In the meantime, please download the ZIP file linked below that contains a replacement JavaScript file. This should fix the flickering transitions issue. Here is where to put this file to fix the problem:

To fix the problem for all future slide shows on a Mac, replace the file of the same name here:
Applications > Soundslides > shells > iOS_html5 > _files

To fix the problem for all future slide shows on a Windows computer, replace the file of the same name here:
C > Program Files > Soundslides > shells > iOS_html5 > _files

To fix the problem for existing projects, replace the file here:

To fix the problem on any projects already published to a web server, replace the file here:

http://support.soundslides.com/index.ph … amp;id=374