missing close button for inline elements in some cases

[viliusle]

If users will open modal dialog on Inline HTML elements, close button may not be visible if matching all conditions below:

1. at least if device is mobile android (chrome). Sadly chrome mobile emulator does not reproduce this bug !
2. inline dialog has lots of content (scrollbar activates).

To reproducer it:

1. edit https://midzer.github.io/tobii/demo/ and add lots of content for "Inline HTML" section to force scrollbar to appear.
2. open it on mobile (android, Chrome) and open "Inline HTML" modal window
3. most of close button will not be visible .

What happens?

There is CSS rule .tobii__slide [data-type] with value of:
max-height: var(--slide-max-height); or max-height: calc(100vh - 2.77778em). Because this element is centered, layout shifts to top and hides most of close button. But I can not understand why desktop chrome and mobile chrome renders this situation in different ways.

Possible solution

Replace above line to:
max-width: 100%.

p.s. more testing must be made before this can be updated.

[viliusle]

Related:

• demo should be updated and more content should be added to "Inline HTML" section to simulate real world situation.
• "YouTube: (mode: iframe)" on demo does not work. Find better video, that will not be deleted in next 5 years (good luck here...)

[midzer]

Hi @viliusle. Thanks for filing!

Let's try your proposed solution in develop branch.