Trigger .click not working in ios

[TheAnarchyState]

I have come across several issues when viewing a story on an iPad. The iPad does not play any audio, adds large blank spaces between some components, doesn't move any of the Parallax backgrounds when scrolling and takes a long time to load images and quotes.

[bearded-avenger]

Parallax is completely disabled on mobile. For the images I recc making sure they're optimized. Not sure if there's anything in Aesop specifically that we can do, this is more theme level stuff.

[etcook]

There isn't a good parallax implementation on mobile as of yet. There are ways to hack it and make it kind of work, but the lack of a scroll event on mobile means there's just no good, fluid solution.

The best you can do is create an invisible anchor that moves along with the page, and measure the distance from the top on finger release. This results in choppy movement that only happens when you let go.

It's best just to turn it off altogether.

[TheAnarchyState]

Okay. How about the audio, is that theme related too? I'm using Jorgen.

[bearded-avenger]

Do you have a URL?

[TheAnarchyState]

http://www.theanarchystate.uk/devolution/

[bearded-avenger]

does it work if you use the wordpress audio shortcode?

[audio mp3="source.mp3"]

[TheAnarchyState]

Sorry, to clarify, the audio works on the iPad if I click on the play button. It won't autoplay though, even though viewstart is on.

[bearded-avenger]

ahh ok, this makes sense. i think its because .click events dont work in iOS . will look into this

[TheAnarchyState]

Hi Nick. Will a fix for this likely be in 1.1? We are ready to launch but are holding off as music is integral to our story and so many readers are likely to be on iPad. Many thanks, Mark.

[bearded-avenger]

@TheAnarchyState mind testing this out?

[bearded-avenger]

BTW if you have this plugin active, you'll get automatic update notifications as we push them here to dev branch.

Beta plugin https://github.com/afragen/github-updater

[TheAnarchyState]

Just updated to the latest version, but the audio still does not automatically start on iPads.

[bearded-avenger]

I've tried a few fixes here with no luck as of yet.

[bearded-avenger]

I worked on this yesterday, and this morning, and to be honest I'm not so sure that we can do this on mobile. I went as far as writing a custom touchstart function and even that does not function properly because the user triggers the touch start immediately to scroll the page. Even if it was working, say the user has touched, and scrolled, and teh music player comes into view, it wont start playing because the user hasn't finished touching the screen yet.

End the end I'm not sure there's a reliable way to do this.

[TheAnarchyState]

Thanks for looking into this. I have made a separate iPad version of The Anarchy State, unhiding the audio player so that readers can start the music manually. However, upon testing this we realised that once 'play' has been pressed for a piece of music, each time that audio player passes 50% of the screen (where the autostart is set) it does start or stop. So, for our first chapter (online at http://www.theanarchystate.uk/devolution-ipad/), if you scroll down and press play on all three audio clips in-turn, scroll back to the top and then scroll down as if you were reading properly, the clips autostart as they are supposed to. Does this imply that it can be done? If so, perhaps the above helps identify how?

[etcook]

@TheAnarchyState I think I might have fixed it with this commit: https://github.com/bearded-avenger/aesop-core/commit/d4265b37eb817d96a3585efd7ffe367888553e5a

Do you mind pulling a dev copy and seeing if it's fixed for you?

[bearded-avenger]

After more testing this one is going to be a bit tricky it seems. What you can do in the mean time, is, instead of creating two stories, you can use a css class to force the audio player to be visible on ipad. ASE adds these browser classes.

So something like this could work. We have to use !important to override the inline style

.os-ios .aesop-audio-component {
height:auto !important;z-index:0 !important;position:static !important;opacity:1 !important;
}

Only using important to override the inline style.

[TheAnarchyState]

Thanks Nick, that works perfectly. It's a much more elegant solution than my iPad version!

etcook, I have just updated to 1.1, but there is still no autostart on iPad. Thanks to you both for trying.