iOS display issue

Submitted by examsextra on Mon, 06/13/2022 - 18:00
Forums: 
Bugs in content types

Hi all,

I'd really love to know if anyone has noticed this problem. In the screenshot there are 2 content types. The first is Drag the Words and the second is Fill the Blanks. As you can see, after checking, the green correct answers appear, although the colour is much more faded in Fill the Blanks. I have checked the css for both activites and they match perfectly, so I am struggling to understand this issue. On all desktop browsers there is no problem, but on all iPhones and iPads this is a problem. I think it might also be an issue on other phones.

Has anyone noticed this? Or would anyone have any idea how to fix it? I'd be surprised if no one else has noticed this!

Many thanks to all!

Paul

Attachments: 
Image icon h5p.PNG
Content types: 
Fill in the Blanks
otacke's picture

otacke

Mon, 06/13/2022 - 19:18

Hi Paul!

I have never experienced this, and given that the CSS was customized (the design does not match the original H5P design), I tend to believe it's rather an issue with the customization and not with H5P per se. But ultimately that's hard to say without getting access to the site and without anyone having the chance to check.

Best,

Oliver 

examsextra

Tue, 06/14/2022 - 08:15

Hi Oliver!

Thanks for your input as ever!

I thought exactly the same as you and that it was something to do with my customisations, but when I checked this on the H5P Examples & Downloads page on both my iPhone and iPad, it was still an issue. This is when I thought it had to be an iOS/Safari poblem. If this is the case, then I'd be amazed if no one has come across it before. Interestingly, it only occurs with the green correct colours and not the red incorrect.

Anyway, I managed to fix it by adding this little snippet to the css file {-webkit-opacity: 1}.

All the best!

Paul

examsextra

Tue, 06/14/2022 - 08:17

Hi Oliver!

Thanks for your input as ever!

I thought exactly the same as you and that it was something to do with my customisations, but when I checked it on the H5P Examples & Downloads page on both my iPhone and iPad, it was still an issue. This is when I thought it had to be an iOS/Safari poblem. If this is the case, then I'd be amazed if no one has come across it before. Interestingly, it only occurs with the green correct colours and not the red incorrect.

Anyway, I managed to fix it by adding this little snippet to the css file {-webkit-opacity: 1}.

All the best!

Paul

otacke's picture

otacke

Tue, 06/14/2022 - 10:18

Hi Paul!

That's an interesting one, because it seems that in fact webkit on iOS has been setting the opacity to .4 for input fields that have been disabled for ages, but still, nobody has ever reported this.

I have created a pull request that fixes the issue and hope that the H5P core team will find time to merge it in soon.

Best,
Oliver