Scrolling problem for Questions Sets with Safari

Submitted by spazfox on Wed, 11/04/2015 - 03:49
Forums: 
Bugs in content types

When using Safari, the user is unable to scroll to see all of the options of a multiple-choice question or the navigation buttons in a Question Set. It works fine in Chrome and Firefox. You can see a live example of this here (go to the second question; it may be this only occurs for questions with images?): https://foxylearning.com/tutorials/rft/10/217960-1009

fnoks's picture

fnoks

Tue, 11/10/2015 - 16:08

Hi,

Thanks for reporting! We have fixed this problem in the latest version of Question Set. Please update you website with the new version found here https://h5p.org/question-set.

It would be great if you inform us if this fixes the problems seen on your site!

spazfox

Tue, 11/10/2015 - 22:17

I upgraded to Question Set 1.5.2 but, alas, I'm still seeing the problem in Safari (see the page I referenced earlier).

fnoks's picture

fnoks

Wed, 11/11/2015 - 08:56

I see you have a javascript-error on your page. It might be that is what is causing this issue. Could you please start by making sure this error is not thrown. It is related to this line of code:

$(".jp-audio").bind($.jPlayer.event.ended, function(event) {

The problem is $.jPlayer is undefined.

Please let us know how it goes!

 

spazfox

Wed, 11/11/2015 - 18:21

Thanks. I've fixed the error, but I'm still experiencing the same problem.

fnoks's picture

fnoks

Thu, 11/12/2015 - 10:34

I see. I think you are using an old version of some library. You should have the following versions:

  • Question 1.1.2
  • Multiple Choice 1.4.1

Please let me know how it goes :)

spazfox

Thu, 11/12/2015 - 16:54

No, those are the library versions I'm using. I updated all of my libraries with your Nov 10 release. 

fnoks's picture

fnoks

Tue, 11/17/2015 - 11:12

That's strange. You are using the latest version of the Drupal module, right? (7.x-1.11)

icc's picture

icc

Tue, 11/17/2015 - 14:32

You have a custom CSS rule that says:

.h5p-question-image img {
  max-height: 100%;
}


For some reason, this causes Safari to set the height of the images to 1px when the iframe is resized. Is there any way you can get by without this rule? 

There is another way for H5P to do the iframe resizing, but it isn't very well tested and I'm not sure it actually will solve this issue since the image size seems to depend upon the iframe's size when using max-height: 100%.

I hope this was of some help.

spazfox

Tue, 11/17/2015 - 23:19

Ah, thanks for catching that. I implemented that CSS rule because many users were confused about the small, thumbnail version of question images and did not realize they could click or touch to enlarge them (see https://h5p.org/node/4778). Removing the rule fixed the problem. I'll just hope you make the thumbnail version a configurable option soon. :) Thanks.

icc's picture

icc

Wed, 11/18/2015 - 09:32

Yes, there will be an option for the thumbnail view in the next release :-)