I'm using a fancyBox to display iFrame, but when I use Chrome on a laptop with touch screen there are vertical and horizontal scrollbars on the div with "fancybox-inner" css class. This element have an attribut "style='overflow:visible;'" which is the problem.
<div class="fancybox-inner" style="overflow: scroll; width: 783px; height: 538px;">
This problem come from the "Enable touch event" option which is set to Automatic on Chrome and is disabled for IE, Edge and Firefox.
If you don't have a touch screen on your computer, you can force this option to be enabled for Chrome, go to "chrome://flags" and search "#touch-events", then select "Enable" in the combo and reboot chrome.
With IE, Firefox and Edge there is no problem but if I enable touch events then scrollbars are displayed too.
On fancyBox website, I tried the iFrame example (http://fancyapps.com/demo/iframe.html?v=3) and the problem is the same.
To solve this problem, I can disable touch event or I can overload the fancybox css on the div to force overflow to be hidden but i don't like these solutions.
- Is there another way to solve this problem ?
- Is there a new version without this issue ?
Sorry for my poor English.