Jump to content

problem in chrome on MacOS - stretching and scaling image


Recommended Posts

Hey. I have a big problem. This behavior was seen only in Chrome macros. I have several containers with sprites, only one is displayed at a time. Multiple 1920/1080 sprites are simultaneously in the container. The container also has this size initially. (I need to make a background image)
When you go through browser tabs for a while or are inactive, the image is oversizing. It is getting huge. I do not understand why this is happening.

I need the image to scale adequately when resized, and not stretch.

Any help would be very important to me.

Link to comment
Share on other sites

  • 1 month later...

I need to make an image full screen with 3d effect. for this I use a DisplacementFilter with a depth map.
for exaple, normal image look like this 

and after bug, you will can see somthink look like this  




this effect can see in macOS (exactly google chrome, may be in another browsers too)

Edited by pranastons
Link to comment
Share on other sites

today I have seen that the same problem occurs if set param "resolution" upper then 1 (I looked this effect in widnow 10 OS, version pixi 4.8.4 )

I would like to get any recommendations for solving this problem. (image which i need used have bad render with "resolution" = 1) 

and can I suggest that the same reason lies at the basis of the effect that can be observed on MacOS with version pixi 5 (with default resolution )

Link to comment
Share on other sites

       displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
       transitionFilter = new Filters.DisplacementFilter(this.displacementSprite);
       transitionFilter.resolution = 0.5;

       displacementSprite.x = this.app.renderer.width / 2;
       displacementSprite.y = this.app.renderer.height / 2;
        transitionFilter.autoFit = true;

       displacementSprite.scale.x = 2;
       displacementSprite.scale.y = 2;

        mainContainer.filters = [transitionFilter];
       transitionFilter.scale.x = this.options.displaceScaleTo[0];
        transitionFilter.scale.y = this.options.displaceScaleTo[1];


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...