Advent Calendar not displaying well on Ipad only [SOLVED]

Submitted by Realia on Fri, 12/06/2024 - 10:11
Forums: 
Bugs in content types

Hi all,

I am using the Advent Calendar plugin on an Wordpress site ; H5P plugin, Advent Calendar content-type and Wordpress are updated to the latest version.

While I was creating some templates for the Advent Calendar content-type earlier this week, I noticed that the Advent Calendar doesn't display well on Ipad only when images are used for doors and background. On my desktop browsers (Safari, Chrome, Firefox), everything displays fine. 

Here is a screenshot that shows how the calendar is displayed on Ipad / Safari in landscape mode (I didn't make this calendar) :

Here is another screenshot on Ipad / Chrome with a calendar that I made. It looks like the background icons are cropped instead of being "resized" to fit the space, so they are not hidden anymore behind the door. (I should mention that I've tweaked the CSS so that the background is transparent instead of #fff) :

It seems that this problem only occurs when the display is 6x4 (fixed or dynamic) :

... because the same calendar in portrait mode and 4x6 displays fine :

I can't reproduce this strange behaviour on my desktop computer (with Chrome, Safari or Firefox). This happens only on my Ipad with Safari and Chrome.

I usually use the Chrome inspector to inspect / tweak / debug the CSS but I don't know how to do that on an Ipad to find what is happening and can't be of any assistance.

Am I the only one to experience this ? Any help would be welcome.

Cheers,

Isabelle 

Attachments: 
Image icon IMG_0398.PNG
Image icon IMG_0402.PNG
Image icon IMG_0403.PNG
Image icon IMG_0404.PNG
Content types: 
wordpress
otacke's picture

otacke

Sat, 12/07/2024 - 12:51

Hi!

I can't reproduce this, but that may be up to the specific configuration. Could you please share a file?

Also, I have not looked at this content type for a long time, and would probably need to dive into the code to find out more. Either way, yes, Safari on iOS is my least favorite browser for a reason ...

In the editor, the field for custom door images says: "Image that will be used for the door. Needs to have a size ratio of 1:1 if you want the left half fit the right half." Is that something that might play a role?

Please also state what version of iOS/Safari you are running on the iPad. That may also be relevant.

Best,
Oliver

Realia

Sun, 12/08/2024 - 11:19

Hi Oliver !

Don't bother diving into the Advent Calendar code because the problem is solved, but I don't really get how it happened... The only thing that I did was to disable the Matomo plugin that I used to get analytics on Wordpress. I have indeed updated all my Wordpress plugins earlier this week and had noticed that since this update, they were many errors showing up in the Chrome console log and involving the Matomo plugin. So I have disabled it yesterday and as I was browsing my website on my Ipad in the evening, I noticed that my calendars were displaying just fine. But I don't see how disabling an analytics plugin can affect the display of the Advent Calendar ?! There must be something else : a cache issue maybe ?... That's probably why nobody else reported having this problem on the forum and why you couldn't reproduce it on your end. Anyhow, sorry for bothering you with something that was apparently related to my specific configuration. This is kind of mysterious though... 

 

 

Thanks again for your help !

Best,

Isabelle

otacke's picture

otacke

Sun, 12/08/2024 - 11:43

I also wouldn't know what the other plugin could do to break things - at least not by accident.

But since all seems to be fine now, let's call it one of the great mysteries of life.

Realia

Mon, 12/09/2024 - 17:34

Hum... no great mystery after all : I think that the "bug" was more probably caused by a formatting mistake coming from my custom CSS. I have indeed made minor alterations to the H5P CSS and a closing curly brace was marked as missing out from my CSS file (I forgot to close it). So I corrected my CSS to make things right. My guess is that, in the meantime, the Advent Calendar display on Ipad has probably been broken by this missing curly brace, whereas the desktop browsers appear to have been less sensitive about it (which surprises me no less). All things considered, it seems more logical that a CSS mistake would cause trouble to a content display rather than disabling a Wordpress analytics plugin, doesn't it ? :D
Anyhow, sorry for this bad report ;(

Best,

Isabelle