➤ black html5 page background on mobile browsers

Hi there,

I'm testing SL3,
and I encountered an issue with the look & feel of the mobile version of the published content inside every mobile browser:
the HTML5 page background (the background behind the player) is always black if viewed in a mobile browser;
there is no consistency between the colour you set as background in the PLAYER tab inside Storyline 3 and what the mobile browser shows,
the background will always be black.

Instead, if viewed on a desktop browser (tested with chrome, ie, edge, firefox), if you set a white background in SL3, the desktop browser correctly shows a white background, so all fine.

 

Here's an example of a published HTML5 project with a seamless player
(https://articulate.com/support/article/how-to-create-a-chromeless-player-sl2)
and a white background colour set in the PLAYER tab (in Storyline 3),
have a look:
http://176.126.243.189/black/
try opening the link with a desktop browser and then with a mobile browser.

chrome mobile

 

safari mobile

 

chrome desktop


Please note,
I have used a seamless player, but the issue can be replicated with any player xml setting.
I have published with the WEB output (but it's the same with SCORM, TIN CAN, etc),
format: HTML5 ONLY
player: SEAMLESS_WHITE_PLAYER (but the issue is replicated with all player settings)
quality: CUSTOM MAX SETTINGS
publish: ENTIRE PROJECT

 

We already knew that this is the expected behavior,
the responsive player in Storyline360/SL3 doesn’t support color and font properties, as stated here:
https://community.articulate.com/discussions/articulate-storyline/articulate-360-mobile-player-settings
and here:
https://community.articulate.com/discussions/articulate-storyline/black-html-page-background-on-ipad-sl3
but it would be great to have the choice to change the background colour on the mobile player as well.
The black background really impacts my design and I suppose other users.
Is there a way to change the colour of the background (showed in every mobile browser) styling the published files afterwards?
I'm not a CSS master.

Attached is the story file and the published version.
Thanks in advance.

26 Replies
Marco Del Giudice

Hi Brian,
thank you for your help,
but there is no black in my theme,
check the pictures above.

That black in the mobile version (the background behind the player) is the Storyline 3 / 360 expected behavior,
the responsive player in Storyline360/SL3 doesn’t support color and font properties, as stated here:
https://community.articulate.com/discussions/articulate-storyline/articulate-360-mobile-player-settings

Has anybody found a way to change the colour of the background (mobile browser) styling the published files afterwards?

Marco Del Giudice

If anyone wants to try and test it out,
the best way to replicate it on a desktop computer is using Firefox with the extension Go-Mobile installed and active (and then inspect the code),
because if you change the size of the screen into the mobile in the developer tools in Chrome, it doesn't trigger the mobile SL3 player, but it's just like a resized (smaller) desktop version.

Thanks

Zsolt Olah

Phil,

Apparently, I have two egos here in the community. The ZO above is from work, this is my original... Anyway, notifications go to different places, so I just saw your note.

If you download the bb.zip the two places where changes were made are:

"

Two places: body.is-mobile{background: in html5.html. Change the color to white or grey.

Then check main.min.css in html5/lib/stylesheets. Look for "background:black". If it's related to is.mobile, you probably want to change it. You can run a comparison between mine (bb.zip above) and a fresh one. The only tweak you might need is the menu. Right now it's black overlay and the menu items are black too. Those should be grey or white, depending on what your background color will be."  

Phil Eagles

Thanks for taking your time to reply Zsolt and thanks for clarifying the areas that need changing. I can confirm that I have successfully changed the background colour despite what the support team say!

I just wish Articulate would allow the user to change this within the program instead.

Thorsten Klemusch
Zsolt Olah

Phil,

Apparently, I have two egos here in the community. The ZO above is from work, this is my original... Anyway, notifications go to different places, so I just saw your note.

If you download the bb.zip the two places where changes were made are:

"

Two places: body.is-mobile{background: in html5.html. Change the color to white or grey.

Then check main.min.css in html5/lib/stylesheets. Look for "background:black". If it's related to is.mobile, you probably want to change it. You can run a comparison between mine (bb.zip above) and a fresh one. The only tweak you might need is the menu. Right now it's black overlay and the menu items are black too. Those should be grey or white, depending on what your background color will be."  

Sorry, I can’t find the first place (body.is-mobile). Zsolt, could you please give me more detailled informations about where to find it? That would be great.

Sherri Sagers

Thanks for the idea, Ashley, but unfortunately, the new modern player doesn't help with my issue. My problem is that I've got a module that mimics a little app that we have, so I don't want any of the player showing. I've set a lot of the backgrounds to be transparent, and it looks and works great on the non-mobile devices, but when I play it on a mobile device, the black page background comes through and none of the onscreen text is readable. :( Any other ideas would be appreciated! ... or just a way to control the background page color.

Ashley Terwilliger

Hi Sherri,

Is it a video that you have with a transparent background or on slide text?  I'm curious, as there is an open issue where Videos with a transparent background loses transparency and is played with black background. 

If you're running into something different it would help to see your .story file to take a look at settings and do some testing! 

Sherri Sagers

Hi Ashley - 

It's not a video file. It's sort of a wizard that helps a training coach pinpoint the specific training module to help a seller improve. It works great on a computer, but if you try opening the published file on a mobile device, everything's black except for the buttons, so you can't read the text.

I fixed the issue by going back into the published folder (...> html > lib > stylesheets > main.min) and replacing "background:black" with "background:white" (a suggestion by someone earlier in this thread, I believe). That works fairly well, but it's a pain to go back and change that every time I need to make a change to the .story file. It also doesn't work 100%. I've found that often I have to open the file and click the back button before the black background goes away.

Any help would truly be appreciated! :) 

Ashley Terwilliger

Hi Sherri,

Thanks for sharing the file. I took a look and published it to my Amazon S3 account here.  I tested it on my iPad running iOS 11.3 and it looked normal to me (screenshot added). The same as it was appearing on Desktop.

Can you test my link and let me know what you see? Also what mobile devices were you using? 

Sherri Sagers

Wow. Absolutely no problem displaying the file from your link on my devices. I wonder if it's because my browser is remembering the page color from the previous version? I wish I knew what fixed it! The devices I tested on were an iPad running iOS 11.4 and an Android Samsung Galaxy S7 phone. I used Safari on the iPad and Chrome on the phone. They should both be the latest versions.

Before I discovered the issue and saw it myself, it was reported from a trainer using an iPad and iPhone. He was also only able to view the files correctly on his desktop computer. 

Thanks so much for looking at the issue. If you have any idea what might have fixed it, please let me know. The changes I made to the background page were made in the published files, so it shouldn't have affected the .story file.

Thanks!