SVG Cache Problem on Chrome

[demiculus]

When it is the first time I open the game and play everything is fine 

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: 

 

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/

[ivan.popelyshev]

Problems with cached SVG's. It might be browser problem, need to reduce this example somehow. I will think about it.

[Esqarrouth]

It's interesting that the small cards aren't consistent. Why a few one are still big but why the others are small? 

 

The pattern I see at the bottom is, first and last is small. That pattern isn't present on the right side tho

[demiculus]

@ivan.popelyshev anyway I can help by giving any other context?

[ivan.popelyshev]

Yep. Is that the case for all browsers?

[demiculus]

@ivan.popelyshevNope it doesn't happen in firefox, but it happens in chrome & safari. 

[ivan.popelyshev]

Sorry, right now I have a big queue for people who want me to look at their BIG examples and fix strange problems appearing.

Please search for another helper or wait for two weeks or so. Alternatively, you can make minimal example that reproduces the problem.

[demiculus]

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.

 

 

[demiculus]

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. 

[demiculus]

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

[demiculus]

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. 

[Vakuu]

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?

[ivan.popelyshev]

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.

[demiculus]

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. 

[ivan.popelyshev]

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.

[Vakuu]

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?

[jonforum]

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.

@+