z-index

Page: 1

Author Post
Member
Registered: Nov 2012
Posts: 15
Hello there,

I have a problem with the z-index on android.

When enlarging an image, the image seems to be hidden behind the content container. Looking at what is happening, is that indeed the z-index is correct at 111111 and the image at 111115 so i dont understand why is sitting behind the content container.

I tested iOS and that works correctly, also works correctly on desktops.

The site is unfortunately behind locked bars, so i cant show the page itself.

Any ideas?, Thanks.
Member
Registered: Nov 2012
Posts: 15
It will work on a android smartphone, but not on a tablet.
Member
Registered: Nov 2012
Posts: 15
i did update from 4.27 to 5.5

I have now reverted back to 4.27 and it works again.

Let me know what the problem is, if its something to do with a setting or so? That i dont know about in the new version. TY
Administrator
Registered: Aug 2008
Posts: 3382
I'm guessing you're looking at inFrameResize behaviour and not at a problem. The default setting for this option is true, which causes image resizes to occur within an unchanging floatbox frame. The image can be dragged around inside the frame after being resized up. If you set inFrameResize to false, you'll get the old behaviour of resizing the entire floatbox up to larger than screen size and will need to use the scrollbars or drag the floatbox around to see the offscreen parts of the image.

If you're getting different behaviour from different browsers it will be because the image is fitting the viewport on some browsers but is being auto-sized down to fit on other browsers with a smaller viewport.

From the change-log for version 5.0.0:
Quote
New 'inFrameResize' option will enlarge an image without changing the size of the floatbox frame around it. The image can then be dragged around inside the floatbox frame.


From the Options Reference:
Quote
inFrameResize - true | false
An image may be displayed at smaller than its native size when autoFitImages causes it to scale to fit the viewport. The image can then be resized to its full size using the resizeTool as described below. The default resizing behaviour is for the floatbox frame to remain at its smaller size inside the viewport and for the image to scale up to its full size inside the floatbox frame. It can then be dragged around inside the frame with the mouse or touch gestures. Set inFrameResize to false to disable this behaviour and to cause the entire floatbox, including the frame, to to scale up to full size when requested.
Member
Registered: Nov 2012
Posts: 15
I have limited the problem to one browser only which is the native Android browser, which i think is done by mozilla.

I have tested Chrome and Firefox on android both work correctly, although pretty slow.

Btw it's anything that pops up that is not working ie, links to pdf files, images.

What is working are the tooltips.

Do you think this can be patched up?
Administrator
Registered: Aug 2008
Posts: 3382
Sorry, I don't understand your problem and can't help you if you can't show me a page that illustrates the issue.

The native Android browser is WebKit based. In my testing, this browser works fine against all the content on the Floatbox demo page.
Member
Registered: Nov 2012
Posts: 15
I understand it's hard especially if you cant see the page.

Here is a screenshot taken from a Transformer T101

http://roofracks.co.uk/public/2012-12-03_14.08.50_ASUS%20TRANSFORMER%20TF101.png
Administrator
Registered: Aug 2008
Posts: 3382
At first glance it looks like you must have really big z-index values on those page components that appear above the Floatbox. But I can't debug a screenshot. Show me a live page with a problem and I can help, otherwise....
Member
Registered: Nov 2012
Posts: 15
Hiya just sent you an email with the details, thanks for the effort and taking your time in helping me out!
Administrator
Registered: Aug 2008
Posts: 3382
Thanks for the link into your page. I have tested it from the Android browser on a Transformer Prime and it's behaving just fine. The floatbox appears above the content as it should and I can't reproduce anything similar to your screenshot. Whatever the problem is, it's local to your browser instance. My guess is, you just need to flush the browser cache after some prior experiments with various z-index settings.
Member
Registered: Nov 2012
Posts: 15
Hello there, thanks for getting back to me. I flushed everything, seems the issue is still there, as i agree with you i think it's just this browser.

Ill have to try and install it and reinstall the native browser.

Thanks again for your help.

Page: 1