demiculus

SVG Cache Problem on Chrome

Recommended Posts

When it is the first time I open the game and play everything is fine 822587480_ScreenshotatNov1806-36-59.thumb.png.7d868bbfd7893f0537b6acbf833862e0.png

after a couple of moves, players get new turns, some cards fly around(players get resources, trade etc) and then when I hit page refresh to start a new game some of the cards are smaller: 

324941532_ScreenshotatNov1806-43-33.thumb.png.768d1543ab61fbbae4a7b4628521c813.png 

Note that this happens to only to cards. The thing that is common with all cards is that they animate. The cards animate when player receives a new resource. So maybe I thought some old code was continuing to run on the background even when the player refreshed the page, so I made sure all the old animations stopped when the player hit refresh. This didn't solve the problem.

Another thing that was interesting was, the cards on the left bottom and the cards in the bank are totally different sprites. They have nothing in common except for their texture (bank cards don't even animate). So I'm guessing the texture pack didn't load right specifically for the 2 types of cards shown in this image. Note that each game different cards are smaller, but once a certain texture is smaller 'ALL' of the sprites that use that texture becomes smaller. 

How can I fix this?

My loading function is as below
 

export function loadImages() {
        PIXI.loader
            .add("tile_lumber", "../images/tile_lumber.svg")
            .add("tile_brick", "../images/tile_brick.svg")
            .add("tile_wool", "../images/tile_wool.svg")
            .add("tile_grain", "../images/tile_grain.svg")
            .add("tile_ore", "../images/tile_ore.svg")
            .add("tile_desert", "../images/tile_desert.svg")
            .
            .
            .
            .on("progress", loadProgressHandler)
            .load(GameUICore.setup);

}

export function setup() {
        assetsLoaded = true
        createContainers()
        GameUICards.setCardProps() //The cards on left bottom created here
        GameUIActions.createActions()
        GameUIPlayers.createPlayers() //The cards in bank created here
        createTimer()
        createKeyboardActions()

        app.ticker.add(function (delta) {
            animateObjects()
        });
    }

function animateObjects() {
        for (let view of animatingViews) {
            view.animate()
        }
        for (let line of animatingLines) {
            line.animate()
        }
        for (let text of animatingTexts) {
            text.animate()
        }
        removeObjectsWhoseAnimationFinished()
    }

You can try to reproduce the problem: http://katan.io/

Share this post


Link to post
Share on other sites

Sorry for my late reply, I had family issues. 

So the things I've figured out it 

`cmd + shift + r `-> doesn't resolve in such a problem

`cmd + r` -> resolves in such a problem

The problem is something to do with cache and I couldn't decipher how. 

I messed around with Cache-Control as well as other things but no luck

<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

I'm trying to turn `cmd + r` into `cmd + shift + r`. If it is possible this'll solve the problem. I'll post when I do.

 

 

Share this post


Link to post
Share on other sites
function getRandomString(): string {
    return '?' + String(Math.floor(Math.random() * 9999999999))
}

export function loadImages() {
    PIXI.loader
        .add("tile_lumber", "../images/tile_lumber.svg" + getRandomString())
        .add("tile_brick", "../images/tile_brick.svg" + getRandomString())
        .add("tile_wool", "../images/tile_wool.svg" + getRandomString())
        .add("tile_grain", "../images/tile_grain.svg" + getRandomString())
        .
        .
        .
        .on("progress", loadProgressHandler)
        .load(GameUICore.setup);
}

I've changed it like this and seems to be working. This is probably not the optimal solution but it works. 

Share this post


Link to post
Share on other sites

@ivan.popelyshev

I had removed caching thus fixed the problem (sort of)

But now I wanted my game to be faster thus I'm trying to cache everything. This problem is back.

I'm digging deeper into what is going on, so far what I have found is

- This bug happens only on chromium browsers (chrome, brave etc..)

- This bug happens only when using webGL rendering not canvas: https://youtu.be/9oTXm5ejWWY

I'm looking deeper into how renderers work but I lack a lot of knowledge. 

I might create a standalone project which reproduces the bug. I'll post here if I do.

Share this post


Link to post
Share on other sites

After a lot of googling

Quote

chrome svg cache webgl render bug

 I've fixed the problem with adding crossOrigin: true

.add('tile_lumber', getImagePath('tile_lumber.svg'),  { crossOrigin: true })

I have no idea what crossOrigin does or how it works but it seems to have solved the problem. I got the answer from 

 

If the problem occurs again, I'll post here. 

Share this post


Link to post
Share on other sites


I have huge question mark in the lobby now allowing me to click on games speeds, VPs for win and etc...
also when I start a game My screen is half way down and I can't click the buttons.
How to fix this?

Share this post


Link to post
Share on other sites
1 hour ago, Vakuu said:


I have huge question mark in the lobby now allowing me to click on games speeds, VPs for win and etc...
also when I start a game My screen is half way down and I can't click the buttons.
How to fix this?

Prove that you are not a bot in 1 hour or ban.

Share this post


Link to post
Share on other sites
12 hours ago, Vakuu said:


I have huge question mark in the lobby now allowing me to click on games speeds, VPs for win and etc...
also when I start a game My screen is half way down and I can't click the buttons.
How to fix this?

Ctrl + Shift + R

Apparently I updated the css but it was still using the css from cache so you need a full refresh in order to fix it. I'm going to make the new css also include the version number. file.css?v=23

Also I'm curious how you found this forum for support, we have an email for such questions. 

 

11 hours ago, ivan.popelyshev said:

Prove that you are not a bot in 1 hour or ban.

After the update we got this questions from all over the place. Sorry it spread here as well. Feel free to delete Vakuus post & the ones which were related to keep the forum cleaner. 

Share this post


Link to post
Share on other sites
8 hours ago, demiculus said:

After the update we got this questions from all over the place. Sorry it spread here as well. Feel free to delete Vakuus post & the ones which were related to keep the forum cleaner. 

LOL, no, lets leave it here :) I thought that was the case, just wasnt sure.

Share this post


Link to post
Share on other sites
2 hours ago, Vakuu said:

What is this bulshit with "prove you are not a bot" and "in 1 hour"
Do you really believe that I live in this forum to be every hour here?

It's a somewhat clumsy answer from our friend Ivan.
But I thought the same thing when i see you post, the problem is that you asking an unreadable question and off topic.
There is also some spam problem with bot that have this kind of behavior.

The ideal would be to fill your profile and open a post so that the dev can help you in a more targeted way.
Also take the time to detail your issue.

Do not take it badly, if you are new to the forums, generally and it is preferable to open your own post.
it not like a Chat Room.

@+

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.