➤ 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
Ashley Terwilliger

Hi Sherri,

It absolutely could have been the browser keeping and showing an earlier version of the course. Perhaps testing out the link in a Private browsing mode of Safari would help to confirm that you're loading the link anew?

Correct, the published output files you changed wouldn't be connected to the .story file and therefore wouldn't have impacted my publishing. 

Let me know if you're still able to see it on your version, and if you have that link which you can share I'm happy to test it on my devices.