➤ black html5 page background on mobile browsers
May 26, 2017
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
and a white background colour set in the PLAYER tab (in Storyline 3),
have a look:
try opening the link with a desktop browser and then with a mobile browser.
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:
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.