Problem with floatbox822 - Not rendering floatbox full screen on mobile devices

Page: 1

Author Post
Member
Registered: Aug 2019
Posts: 4
We are facing issue with Floatbox822 version that the floatbox is not rendering full screen on mobile devices.

The floatbox is hosted and launches by separate application (hosting application e.g. Abc). We render our screens (our application e.g. Xyz)) in the floatbox and finally returned back to the hosting application. The floatbox will have a fixed width and height and placed center in desktop browser within the hosting application. And this floatbox should be rendered full screen on mobile devices.

With the Floatbox8 version, the floatbox was rendering full screen on mobile devices with below floatbox options settings

1.fbOptions = {


global

width: customWidth,

height: customHeight,

overlayOpacity: .2

},

type: {

iframe: {

mobile: {

width: "100%",

height: "100%"

}

}

}

};


2. And also injected the meta element for the viewport.

var meta = document.createElement("meta");

meta.name = "viewport";

meta.content = "width=device-width,initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=no";

document.getElementsByTagName("head")[0].appendChild(meta);

};

With the above settings the floatbox is not rendering full screen on mobile when using with floatbox822.

We also noticed that Floatbox is getting resized multiple time from smaller size to bigger size before complete rendering on the mobile device.

On analyzing this issue, we found that “isSmallScreen()” method ( floatbox.js) returns “false” for smaller devices.

We have tried to fix this issue by using the min-device-width and min-device-height instead of using min-width and min-height respectively in the media query. (In floatbox8, screen.width and screen.height were used for identifying the small devices rather than using the media query).

function isSmallScreen() {

// Boolean, usually true if screen is less than 8 inches.

var

rtn = false,

parentSays = parent.fb && parent.fb.smallScreen,

media = window.matchMedia;

if (!!parentSays === parentSays) {

rtn = parentSays;

}

else if (media && window.innerWidth) {

rtn = !media('(min-device-width:512px)').matches || !media('(min-device-height:512px)').matches;

}

return rtn;

} // isSmallSc

After applying the above fix, isSmallScreen() method started identifying the smaller screens and it applies the fbOption type setting as below and doesn’t make any effect to make the floatbox full screen on mobile device.

iframe: {height: "100%"width: "100}

We have tried latest floatbox version (floatbox826) and facing the same issue.

Due to this issue we are not able to use the latest version of floatbox and forced to degrade to the previous version ( floatbox8 ) which seems to be the only floatbox rendering full screen on mobile devices

Could you please provide some direction on how I could resolve this?
Administrator
Registered: Aug 2008
Posts: 3382
This one sounds like a challenge.

I'll put together my own little test page of a 100% x 100% iframe and poke around the areas that are giving you trouble. In advance of that, a couple of questions and requests...

What is floatbox8? When comparing version behaviours, it would help me (and possibly you) to use the latest v8.2.6 from the download page and the last of the 8.1 series, v8.1.3.

When you say "fullscreen", do you mean the device's native ability to show fullscreen iframes similar to what is commonly used for videos? Or are we taking about a normally displayed floatbox's ability to fully utilize the screen width and height?

What device are you using?

Does it work fine on a non-zoomed screen but mess up when zoomed?

Thanks for tip on replacing 'min-width' with 'min-device-width'. I'll look further into that.

To be continued...
Member
Registered: Aug 2019
Posts: 4
Thank you for the reply.
Please find the below details for your queries.

Floatbox8 is the unreleased version shared to us (Equifax) by you after fixing vulnerability fixes and to make our application responsive. This is the version we were using before upgrading to Floatbox 8.2.2. So, we compared Floatbox8 (unreleased version) with Floatbox 8.2.2 (released version) and also compared Floatbox8 with Floatbox 8.2.6 (latest released version)

I couldn’t find a way to attach the files to the forum so please ping me in the given below email.
anil.issac@equifax.com

I can share you the required files (floatbox8 or any other files) to you for your reference.

Here we are talking about a normally displayed floatbox's ability to fully utilize the screen width and height.

We use the below mobile devices
1. iPhone 6/7/8/10 (Safari)
2. Samsung Galaxy S8 (Chrome)

It doesn’t work fine even in a non-zoomed screen
Administrator
Registered: Aug 2008
Posts: 3382
The failure of width and height when set to 100% has nothing to do with small screens or mobile options. It fails in all browsers on all platforms in all prior 8.2.x versions, and for any values expressed as % - at least for iframe content.

I've got a new version, 8.2.7, coming out in just a few days that fixes this. It currently needs a little more testing and a couple of smaller bugs to be eradicated. It is strongly recommended that you upgrade to this version across all your production instances. There is no support available for earlier versions, and there will be a number of imperfections in any earlier version that do not appear in this release.

I can't reproduce any problems with the isSmallScreen routine. Both the 8.1 and 8.2 incarnations accurately detect my android phone as a small screen, my android tablet as not a small screen, and any desktop browser as a small screen if and only if it's sized below 512px in either dimension - all regardless of zoom level. I no longer have an iOS device to test with so would appreciate any and all feedback on the test page linked below. (jGromit, are you still lurking?)

The device-width and device-height media queries are flagged on the MDN site as deprecated. "This is an obsolete API and is no longer guaranteed to work." min-width and min-height are the correct queries to make, and have the virtue of measuring the browser viewport (not OS screen size) in CSS pixels, which is what we are interested in.

Please check out the test page for these problems at https://floatboxjs.com/test.
This test page uses a beta version of the new 8.2.7 and reports the measurements and small screen determination using both the old 8.1.x and new 8.2.x routines.
The 'click me' button shows basically the same information in a floatboxed iframe sized to 100% x 100%, to test and demo that the %-based sizing problem is fixed. I'm very interested in any anomalies anyone discovers on that test page.
Member
Registered: Aug 2019
Posts: 4
Thanks for working on it.

I have copied the Floatbox js 8.2.7 js files from the shared testing url (https://floatboxjs.com/test). But still we are facing the same issue.

Do you want any working url so that you can verify how it is getting loaded in the full screen? You can try it with the emulators in your chrome browser.
Administrator
Registered: Aug 2008
Posts: 3382
A working URL of a page demonstrating any problems you are experiencing would be invaluable in identifying the cause and fix for those problems. Without an example page our only tools are speculation and conjecture.

What about that test page I put up for you? Does the floatbox open at 100% x 100% for you? Are the small-screen measurements reporting correctly?

It probably does not need to be said, but the v8.2.7 files you skimmed from floatboxjs.com are NOT production-ready and are not intended to be out in the world. Please wait a couple of days for the official release. It's probably a complete waste of your time to be implementing and testing that unreleased package.

The sequence for resolving your issues is:
1. Confirm the operation of my test page from your client devices.
2. When the test pages are green-lighted I will put a bow on v8.2.7, link it from the download page, and put a notice that it's ready on this thread.
3. You implement your test pages with the production-realease v8.2.7 package.
4. If there are any issues in your use of the released v8.2.7, link me in to a page that exhibits those issues and I'll sort them out.

<update>
I've skipped v8.2.7 and released the new package as v8.3.0.
</update>
« Last edit by admin on Tue Aug 20, 2019 4:45 pm. »
Administrator
Registered: Aug 2008
Posts: 3382
You've gone quiet, but I have just now posted version 8.3.0 - details on the download page.

Strongly recommend that you (and everybody) deploy this version exclusively. Please raise support issues for any problems you may encounter with this latest release - both to get those problems efficiently solved and to benefit the broader community of Floatbox users.
Member
Registered: Aug 2019
Posts: 4
The BrowserStack which is being used for testing the application in mobile devices is very slow. I could test your test page only in my iPhone and Chrome emulators for different versions of Iphones. It seems your test page is working and rendering properly and it identifies smaller devices.

I downloaded your latest floatbox version 8.3.0 and we are having the same issue which were reported for 8.2.2 and 8.2.6

I think it better to provide you our application url to get more clarity on the issues we are facing
Administrator
Registered: Aug 2008
Posts: 3382
I agree: a link into the problematic pages is the only way to determine what's going on in there. Please, the page(s) must be using an unmodified version 8.3.0 of Floatbox.
Administrator
Registered: Aug 2008
Posts: 3382
8.3.1 now.
There was a sizing bug when html content was auto-fitting the screen.

Page: 1