Image Hotspot issues (png transparency and button size in full screen mode)

Hi,

I am experimenting with the image hotspot content type and found two bugs in fullscreen mode:

1. a transparent background turns black in fullscreen (completely fine while not in fullscreen)

2. the hotspot icon is really large in fullscreen mode and hides the text to click.

Tested in Firefox 94, Chrome 95, Edge 95 with Windows 10, screen resolution: 4k.

Example:

https://www.xn--frank-mller-zhb.net/red-thread-example/

Best

Frank J.

Content types: 
otacke's picture

Hi Frank!

That transparency bug will only require to add white as the default background color in the stylesheet.

The other issue is caused by some peculiar mechanism that Image Hotspots uses for determining the size. As far as I remember, it has a "normal" size that's set when you open the content, and afterwards the size will linearly scale with the image. That means if your initial view is quite small compared to the full screen size, the hotspots will grow quite large whereas this effect would not have such a magnitude if the initial view uses more space of the screen. I agree that a hotspot size relative to the height/width of the image (with some minimum maybe) would be a better approach. Should also only be a small issue, but since the "optimal" size is a UX issue, I guess the H5P core team will have to tell what the size should be if this behaviour was to be changed.

Cheers,
Oliver

BV52's picture

Hi Oliver,

Thank you! I've taken note of this and will bring this up with the developers.

-BV

Great thank you both!