Forma on iOS8 + Safari on Mobile Devices

drgallegos · Post by **drgallegos** » Tue Nov 25, 2014 4:21 pm

Thank you! I have a mobility question:

When I am on a mobile device, such as on an iPad, I can go into the course list page, but when I click on the link to enter into a course, it does not work at all on iPad or iPhone. Is there something in the configuration I need to change in order for a user to be able to enter into a course on a mobile device?

max · Post by **max** » Tue Nov 25, 2014 4:32 pm

Hi,
I suspect you are using Safari + iOS8. It's something we also noticed after upgrading from iOS7. There's an issue with the new Safari and iOS8; we are identifying it in order to fix it as soon as we possible.
In the meanwhile, if you just use Chrome with iOS8 you'll be fine and everything will work as expected.

max · Post by **max** » Wed Nov 26, 2014 9:41 am

Forma Lms doesn't behave correctly with iOS8 AND Safari on Mobile devices
Until we fix this issue, please use iOS8 with Chrome: in that case everything is fine.

marcelmuntaner · Post by **marcelmuntaner** » Fri Feb 06, 2015 5:44 pm

The problem with iOS 8 is caused by the overlay, it prevents the user from clicking, as it's on top of the pages.
One quick fix for it would be sending this layer to the back. After, when opening a SCORM module you will need to bring this layer forward again. All this can be done with css. I added the following lines to the base.css file of my template and now the site works perfectly with iOS 8 + Safari:
#overlay_lightbox_c {z-index: -1000 !important;}
.masked #overlay_lightbox_c {z-index: 9000 !important;}

jasmines · Post by **jasmines** » Mon Feb 09, 2015 10:19 am

I'm experiencing a similar (think of) behavior with the button that opens up/closes the courses list in a coursepath with iOS (all versions).
Can you confirm it?

jasmines · Post by **jasmines** » Fri Feb 13, 2015 11:20 am

Bump!
No one?

marcelmuntaner · Post by **marcelmuntaner** » Tue Feb 17, 2015 3:23 pm

Hey Jasmines,
If I understand well, you refer to the expand/collapse button in the Curricula.
I have tested this in iOS8 (I can't test it in any other version... I only have one iPad!) and I haven't found any malfunctioning of the button you mention.
In fact I have tested this with my own template (with the fix for iOS8 mentioned above) and with the Forma standard template, and it works fine in both cases.
My guess is that it has probably something to do with JavaScript, as the expand is handled by a JavaScript function...
Anyway, I think that this should go in another thread, as I don't really think it's related.
If you do ask this in a new thread, make sure to specify the Forma or Docebo version that you are using and if your template has been modified (in which case I would suggest to check the same issue with the standard template, in order to eliminate possibilities...). More specificity on the device/s you are experiencing this malfunctioning with would be helpful too

canelli · Post by **canelli** » Wed Mar 04, 2015 8:55 am

Hey marcelmuntaner

your solution

Code: Select all

overlay_lightbox_c {z-index: -1000 !important;}
.masked #overlay_lightbox_c {z-index: 9000 !important;}

break the player in "Teacher area / edit material" playing a SCORM material (click on play icon )

marcelmuntaner · Post by **marcelmuntaner** » Tue May 26, 2015 2:44 pm

Hi Claudio,

Sorry the I didn't reply before...

The first css rule by itself, does break the player: it sends the overlay to the back, so when the player opens you can't see it.

That's what the second rule is for, to bring the overlay to the front when the player opens.
When the player opens, YUI appends the class 'masked' to the 'body'. This makes the second rule to apply on the 'overlay_lightbox_c' div.

If it doesn't in your case, I can only think of two possibilities:
1.- YUI is not appending the 'masked' class.
2.- You have another more precise rule that is overriding the second rule.

... also, make sure that the two rules are written fully (in your comment there's a '#' missing) and that they are both in a stylesheet that actually loads (I think base.css would be your best choice).

Hope this helps, although I guess that by now you will have already found the solution by yourself...

Login Form