Wrong image resizing on Android tablets and mobiles

[DePalmo]

As title says, when this plugin is used on PC it's great and I really love it, but when I tried to use it on my Android tablet device, the backgrounds are all wrongly stretched. I tested in landscape and portrait view. Then just out of curiosity I tested the website on my android mobile and there was the same problem.

The issue can also be seen on your website.

[jaysalvat]

Thanks.
Unfortunately, I have no Android to check that Android bug.

[DePalmo]

Can you check it with iPhone/iPad? I don't have those, but I'm guessing the bug is also there.

[felixandersen]

@DePalmo FYI the bug is not present on iOS

I have a Android/iOS specific internal app that used vegas and ran in to this issue. I ended up implementing a similar full screen effect using the pure css techniques outlined in this article http://css-tricks.com/perfect-full-page-background-image/ and the accepted answer in this SO question http://stackoverflow.com/a/9724124

This might be a good solution if you have good css support on targeted platforms.

[skyliner]

@jaysalvat you can use http://www.browserstack.com to see the problem. i ran into the problem when i use samsung galxy s3. but with browserstack you can see scaling problems on several mobile devices.

do you think you will fix that?

[idpm]

I have noticed the same issue. On a iPhone is the background with and height perfect, but not on a android phone. Is there a simple solution for this little bug?

[jaysalvat]

Hello.

I still not have an Android phone to fix it.

It's an open-source project you know. You can all try to fix the bug and provide a fix for the community :)

[MitchBuchannon]

Hi there,
maybe this is an important hint for solving the android bug: on my samsung phone (s2) after reloading a page, most pages have the correct stretched background effect. maybe this is an interesting fact and the solution for this problem is only a few changes away? ;-)

[obik84]

Hi,

Problem is that android devices interprates "position: fixed" wrong.
I made quick solution today (needs to write it nicer and still fix one bug on android when widow resizes).

The solutuin is to add whole vegas images in another container which is positioned fixed and images should be positioned absolute then.

I added this line at 15: (right after init)

if ($(".vegas-container").length == 0){
                $('body').prepend($("<div></div>").addClass('vegas-container').css({
                    position: "fixed",
                    left: "0px",
                    top: "0px",
                    width: "100%",
                    height: "100%"
                }))
            }

And then changed line:

$new.hide().prependTo(body).fadeIn(options.fade, function() {
to:
$new.hide().prependTo(".vegas-container").fadeIn(options.fade, function() {

And ofc changed the images positioning from:

$new.css({
                position: "fixed",
                left: "0px",
                top: "0px"
            }).

To:

$new.css({
                position: "absolute",
                left: "0px",
                top: "0px"
            })

Solution written quickly and not tested precisely.

[cwillinx]

Hi,

sadly this hack didn't work for me.
Version 1.3.4 on Motorola Tablet MZ604, Android 3.1

[federicolaucia]

Hello I found the same problem of other users.
On PCs and laptops pictures you can clearly see, while on some mobile devices are seen deformed.
In addition to my site also http://vegas.jaysalvat.com/ browsing our site with some devices and browser images are seen deformed, ie not adapt automatically.
You see evil on:
Galaxy Tab 2 => browser => "Internet" default
Samsung s2 plus => browser => "Internet" by default.
While with the same devices but using "firefox" or "chrome" you can clearly see.
So it's a problem of the default browser of Android.

Have you any suggestions?

Deformed

Ok

[jaysalvat]

Thanks for the info.
Unfortunately I can't do much without android device.

I've started to work on Vegas v2 which will drop support of old browsers and will use background-size: cover. I hope it will work better on those devices.