Wrong image resizing on Android tablets and mobiles about vegas HOT 11 CLOSED

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

from vegas.

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

from vegas.

@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.

from vegas.

@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?

from vegas.

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?

from vegas.

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 :)

from vegas.

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? ;-)

from vegas.

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.

from vegas.

Hi,

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

from vegas.

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

from vegas.

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.

from vegas.