Jump to content
GreenSock

Sonic

image look blur in android default browser

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Here is my file

http://sw2hk.com/test/js_ani/

 

The first butterfly is look fine.

But the second one is keep rotating.

It look blur in android default browser.

But it look detail and sharp in mobile verison chrome and ios safari.

Link to comment
Share on other sites

hello and welcome to the forums..

 

I just tested your example on Samsung Galaxy S3 - Android version 4.1.2 - in stock browser and on mobile chrome, and did not see any blur.. it actually looks really sharp..

 

what is the phone and android version you are seeing this issue on?

Link to comment
Share on other sites

Hi,

 

Yeah in Android 4.0.4 Sony Xperia Tipo, it looks a little blurry.

 

Try adding force3D:true to the tween vars:

function p1_txt5_1(){ TweenMax.to("#p1_txt5", 2, {rotation:10, onComplete:p1_txt5_2, force3D:true}); }
function p1_txt5_2(){ TweenMax.to("#p1_txt5", 2, {rotation:0, onComplete:p1_txt5_1, force3D:true}); }

Best,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

hello and welcome to the forums..

 

I just tested your example on Samsung Galaxy S3 - Android version 4.1.2 - in stock browser and on mobile chrome, and did not see any blur.. it actually looks really sharp..

 

what is the phone and android version you are seeing this issue on?

 

I am using Android 4.1.2 official rom @ LG LTE2

 

Ospj.jpg

Link to comment
Share on other sites

Hi,

 

Yeah in Android 4.0.4 Sony Xperia Tipo, it looks a little blurry.

 

Try adding force3D:true to the tween vars:

function p1_txt5_1(){ TweenMax.to("#p1_txt5", 2, {rotation:10, onComplete:p1_txt5_2, force3D:true}); }
function p1_txt5_2(){ TweenMax.to("#p1_txt5", 2, {rotation:0, onComplete:p1_txt5_1, force3D:true}); }

Best,

Rodrigo.

 

Hi Rodrigo,

If I used your code, the top and bottom one also look blur. :(

Link to comment
Share on other sites

this looks more like a browser bug and a css issue more than a GSAP issue.

 

have you tried playing around with the css and adding z-index to the images parent div, and also maybe setting an initial transform property on your images, inside your css style sheet.

img {
      transform: scale(1) rotate(0) translate3d(0,0,0);
}

also adding position:relative; to #page div

 

you are currently using this viewport meta tag:

<meta content="width=360, user-scalable=no" name="viewport">

have you tried testing with and without the above tag.. and/or using a different meta viewport tag with different content attribute values.. try removing it and see if you still have the issue to rule out any and everything

 

maybe also setting an intial-scale.

<meta name="viewport" content="initial-scale=1.0">

usually blurry images on android are caused by using css properties like position:fixed or z-index on certain elements with childs that have transforms..

 

see if any of that helps or if it is being caused by something else ..

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×