Scrollbar incorrectly shown for fancybox-inner

[tiritas]

When using the desktop version of Chrome for Windows 8, FancyBox incorrectly thinks that I am on a touch device and adds overflow: scroll to .fancybox-inner for popups of type iFrame. This is occurring in line 880 in FancyBox version 2.1.5:

        if (type === 'iframe' && isTouch) {
            coming.scrolling = 'scroll';
        }

The result is that my content is clipped at the bottom, by the height of the horizontal scrollbar.

[fancyapps]

Are you using some touch-enabled device? Could you check what are values of document.createTouch and ('ontouchstart' in window) ?

[tiritas]

I evaluated the expressions in both Chrome and FireFox. I am running Windows 8 in Desktop mode on a Lenovo T430S, which does not have a touch screen:

document.createTouch: function createTouch() { [native code] }
('ontouchstart' in window): true

[tiritas]

Any progress on this?

[agamemnus]

this is how isTouch is defined by fancybox2:
document.createTouch !== undefined

"The touch events support introduced with Gecko 18.0 (Firefox 18 / Thunderbird 18 / SeaMonkey 2.15 / Firefox OS 1.0.1) has been disabled on the desktop version of Firefox, as some popular sites including Google and Twitter are not working properly. Once the bug is fixed, the API will be enabled again. To enable it anyway, open about:config and set the dom.w3c_touch_events.enabled pref to 2. The mobile versions including Firefox for Android and Firefox OS are not affected by this change. Also, the API has been enabled on the Metro-style version of Firefox for Windows 8."

Simply comment that portion of the code, or modify the isTouch definition to false.

[tiritas]

The problem affects all browsers on my Windows 8 computer, not just Firefox. After some experimentation, it appears that my Logitech T650 touchpad driver causes the OS to report that my laptop is a touch device. It's debatable whether this is correct behavior, but I could just as easily have a touch monitor and still be using a desktop browser.

With the current version I am getting iFrame popups looking like this:

When I comment out the following code:

if (type === 'iframe' && isTouch) {
    coming.scrolling = 'scroll';
}

I get the correct result:

If the iFrame content is taller, then scrollbars appear, as they should according to the visibiliy: auto setting.

Regardless of whether the code in question is commented out, the popup looks fine on my iPad. I guess I don't understand the purpose of setting visibility to 'scroll', instead of 'auto' on touch devices. Can somebody provide some insight?

[agamemnus]

Just speculation here, but it is probably code to fix some other bug! (perhaps on an older browser version)

[fancyapps]

I think that snippet fixed iOS bug, but it works fine now, maybe it was fixed with iOS7. So, I think these lines will be removed.

[mgarnerventuretech]

For anyone interested, this is still an issue, but there a few solutions.
overflow: scroll is necessary on touch enabled devices to allow scrolling to function properly.
Unfortunately (separate issue) it would seem that some browsers on Windows 8 end up with document.createTouch being defined even if they aren't touch enabled machines and thus fancybox will treat it as touch enabled. The result can be some ugly scroll bars for certain users of Windows 8 touch enabled laptops (growing in popularity).

Option 1:
Override the css property of .fancybox-inner to be auto. The result takes away the scroll bars from all devices and screens. The caveat is that on touch enabled devices, the scrolling will not necessarily function properly if the content is larger than screen real estate allows. If you need a fully responsive solution that works across mobile too, this may not work for you depending on the amount of content you are showing in the fancybox. I did this for a site because I had a set content size and didn't need fancybox opening on mobile. It worked fine on iPad1 and 2 still. The important thing is the size of your content.

.fancybox-inner{
overflow: auto !important;
}

Option 2:
Change the source of fancybox to make it overflow auto for touch devices as well.
if (type === 'iframe' && isTouch) {
coming.scrolling = 'scroll';
}

Either comment this out or set 'scroll' to 'auto' instead.
This solution is effectively the same as the first just accomplished in a programmatic way for all fancybox implementations that rely on that source file.

Option 3:
You or someone creates some fancy logic in the source to check which property is needed based on something other than document.createTouch. A possible way is to check whether there are width and heighth differences between two container elements, one with overflow: scroll and one with overflow: auto to determine whether the property is needed. On true touch enabled scrolling devices, the width and height differences should not be noticeable.