missing close button for inline elements in some cases
viliusle opened this issue · 2 comments
viliusle commented
If users will open modal dialog on Inline HTML elements, close button may not be visible if matching all conditions below:
- at least if device is mobile android (chrome). Sadly chrome mobile emulator does not reproduce this bug !
- inline dialog has lots of content (scrollbar activates).
To reproducer it:
- edit https://midzer.github.io/tobii/demo/ and add lots of content for "Inline HTML" section to force scrollbar to appear.
- open it on mobile (android, Chrome) and open "Inline HTML" modal window
- 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 commented
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...)