Hi all! Sorry for the week’s interval there. I was finishing many loose ends with my current job, anticipating to hear back from Automattic soon. (Nope, haven’t heard anything yet, but I’ve decided to take that as good news… They must be preparing to send out a notice to all who passed the second interview at once… ?) Now that I’ve got a few things completed, I should be back to my normal blogging and forum-supporting rhythm again.
Regarding My Last Post
Now, in my last post, I tested out the Presentation Shortcode. I mentioned in that post how I was excited to see once I published the post how presentations turn out on mobile devices.
Conclusion: They don’t…
So, what I am going to do in this post is pretend I am a Happiness Engineer and that a client asks me how to get Presentation Shortcode working on their mobile site. I thought I would document how I would go about trying to solve this dilemma. (I’m guessing in the real world of Happiness Engineers, there would be an internal memo about something like this they could access right away. But I’ll pretend it doesn’t exist.)
Step 1: Figure Out The problem
So, when exactly does the problem occur? Is it a device issue, a brosswer issue, or something else? Let me go and check the post at question in the following environments.
- Mobile
- Chrome: I get a white box with left-right navigation arrows, but I see nothing else. (Box sizes seem to be correct.)
- Safari: Ditto.
- WordPress App: Get the following message where the slideshow should be…
This slideshow could not be started. Try refreshing the page or viewing it in another browser.
- Desktop
- Chrome: No problems.
- Firefox: All good.
- Edge: Perfect.
- Internet Explorer: THE BEST!! Slide transitions actually work!
- Chrome DevTools
- Device –> Mobile: No Problemo!
Okay. So it seems pretty safe to say, mobiles are a no go. (The fact a feature works on Edge, too, means it should be okay with other desktop browsers. ?)
Considering The Cause
While testing the page out in multiple browsers, I noticed something (I thought was) very important. That is, the slide show transitions ONLY work on Internet Explorer. While other desktop browsers show the slideshow, they weren’t playing out all of the features as they should have been.
Which leads me to one hypothesis… The Presentation Shortcode is generating outdated features only an outdated browser can show properly. Ever since multiple shortcode block had been added to the editor, my instincts were telling me that shortcode is probably going to g out one day. It is a matter of time before certain code (like the Presentation Shortcode) just do not work on any platform and they remove it all together.
So what exactly is keeping the presentations from working on mobile? Let me have a look at the HTML code behind presentations…
The presentation of my post was placed in a <section> tag. Each slide is placed inside <div> tags, which are placed vertically on top of each other. Each of these have transitions detailed under a “style” element in the <div> tag, which tell the slides how much to rotate (or not) or fade (or not).
Before the <div> of the first slide, there is another <div>, indicating what the initial slide is going to transform from. Perhaps the mobile pages were showing this initial “slide”, but were not able to move to the next slide?
Checking My Hypothesis
So my guess now is that some (most) browsers aren’t using some features defined under element “style” in <div>. So, I checked some of them out at
https://www.w3schools.com/ .
Hmm… It doesn’t mention that any of the “style” elements are old or out of use. So, my initial hypothesis was wrong. It’s going to take a little more sleuthing before I get to the bottom of this…
Unfortunately, though, that is all the time I had today to look at this today. I will continue investigating the Presentation Shortcode dilemma in my next post.