Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Here I will give you the description and if you would please follow the links to each of the separate presentations provided below.

Just this last weekend (June 10) my code worked in Chromium browsers, AVG,BRAVE,CHROME. It still works in Firefox,Opera.

I originally found this code at ... !Original Example! ... Full Code Example ... !Code on Github!.

It does not work now via Chromium. I do not know why. I made minor expansion modifications before the current failure, that worked nicely. My code is set up in my development SandBox at ... !Here!

My development has been predominantly using Chromium Browsers with periodic check ups through Firefox and others.

In my attempts at correction, I downloaded the Chrome Extension "Pixi.js devtools." This shows me that the Pixi Engine is operating as there is a strange, though constant increase of "transform.position.x" and "transform.position.y" aspects of the analysis, specificall on the last PIXi.Sprite line. The constant increase seems odd, almost like the "effect" is constantly being pushed further away to the bottom left. Please discover this yourself.

I showed a friend my project on Sat. June 10. It worked on browsers AVG and CHROME just like it currently displays on Firefox. I made a full shut down of my computer that afternoon, losing the full content of my clipboard/undo capacity. At this point I had no idea the problems I created or the content I lost. By the evening, turning my computer on again, it was stale and rendered only a scaled up image in anything Chromium, nothing fancy!

I fell out of any understanding that I was operating with. How do I rectify this?

I've attempted a number of different code changes of HTML,CSS and JS variations. My depth of understanding towards JS is limited; CSS is good. At least my image shows, but I would very much like to understand what is occuring?

My HTML:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/><meta name="viewport"content="width=device-width,initial-scale=1.0">
<link rel="stylesheet"type="text/css"href="liquid.css" /><script>document.documentElement.className='js'</script>
</head><body class="no-js"style="background:#000">
<div class="content"><div class="slide-wrapper">
<div class="slide-item">
<img src="BigR.png"class="slide-L">
</div>
</div></div>
<script src="all.js"></script>
<script>
function foReach(l,q){Array.prototype.forEach.call(l,q)}
imagesLoaded(document.body,()=>document.body.classList.remove('loading'));
let sIL=document.getElementsByClassName('slide-L'),spriteImagesSrc=[],pWidth="30vw",pHeight="25vw",t1d="72.5vw,42.5vw",scale1=4.25;
foReach(sIL,img=>{spriteImagesSrc.push(img.getAttribute('src'))});
var initCanvasSlideshow=new CanvasSlideshow({sprites:spriteImagesSrc,displacementImage:'img/dmaps/2048x2048/clouds.jpg',autoPlay:true,autoPlaySpeed:[10,3],displaceScale:[2000,7000]});
</script>
</body></html>


My CSS(lines 9-17 are non-functional to my Question):
:root{--bS:border-box;--trans:opacity 1s;--scale3all:1,1,1}
*,*::after,*::before{-webkit-box-sizing:var(--bS);-moz-box-sizing:var(--bS);-ms-box-sizing:var(--bS);-o-box-sizing:var(--bS);box-sizing:var(--bS)}
body,canvas{overflow:hidden}
body,.js .loading::before,.js .loading::after,canvas{position:absolute}
.content,.slide-wrapper{position:relative}
body{width:100%;height:auto}
.js body{opacity:0;-webkit-transition:var(--trans);-moz-transition:var(--trans);-o-transition:var(--trans);transition:var(--trans)}
.js body.render{opacity:1}
.js .loading::before,.js .loading::after{content:''}
.js .loading::before{background:var(--color-bg);top:50%;left:50%;width:100%;height:100%;z-index:100000}
.js .loading::after{background:var(--color-link);top:50%;left:50%;width:5vw;height:5vw;margin:-2.5vw 0 0 -2.5vw;border-radius:50%;opacity:.4;pointer-events:none;z-index:auto;
-webkit-animation:loaderAnim .7s linear infinite alternate forwards;-moz-animation:loaderAnim .7s linear infinite alternate forwards;-ms-animation:loaderAnim .7s linear infinite alternate forwards;-o-animation:loaderAnim .7s linear infinite alternate forwards;animation:loaderAnim .7s linear infinite alternate forwards}
@-webkit-keyframes loaderAnim{to{opacity:1;-webkit-transform:scale3d(var(--scale3all));transform:scale3d(var(--scale3all))}}
@-moz-keyframes loaderAnim{to{opacity:1;-moz-transform:scale3d(var(--scale3all));transform:scale3d(var(--scale3all))}}
@-ms-keyframes loaderAnim{to{opacity:1;-ms-transform:scale3d(var(--scale3all));transform:scale3d(var(--scale3all))}}
@-o-keyframes loaderAnim{to{opacity:1;-o-transform:scale3d(var(--scale3all));transform:scale3d(var(--scale3all))}}
@keyframes loaderAnim{to{opacity:1;transform:scale3d(var(--scale3all))}}
.content{display:flex}.slide-wrapper{display:none;margin:0 auto}canvas{display:block;pointer-events:none}


My JS:

It is too long to be respectful, so please look to my SandBox for "all.js" ... https://richnutcoffee.net/Z_D/Development_Gallery/Gallery_1/Gallery_1_3/Shopping_Cart/combi_with_Drop/liquid/all.js

What I have tried:

Here is a brief example of the expansion
... Original ...
renderer.view.style.transform="translate(-50%,-50%)scale(4.25)";


... Expanded ...
renderer.view.style['webkitTransform','MozTransform','msTransform','OTransform','transform']="translate("+t1d+")scale("+scale+")";


After failures, I began researching and I became aware that the above original examples do not work on other Chromium Browsers either. I have never experienced an overnight failure like this. I don't know what to do.

In the origin code, the JS is split into 5 code segments.
demo.js ... pixi.min.js ... TweenMax.min.js ... main.js ... imagesloaded.pkgd.min.js


I minified the two that needed it and consolidated all 5 into one file called ... "all.js" ... where you will find ... "renderer.view.style" examples starting on line 25.

Do I need to update all the 'transform' calls from a generic call type of n.transform to n['webkitTransform','MozTransform','msTransform','OTransform','transform'] , there are easily 100 references to it in my "all.js" file.
Posted
Updated 17-Jun-22 19:18pm
v15

1 solution

You are probably going to be a lot better off going direct to the Pixi creators / community instead of a "generic" development forum site like this.
Have you tried asking here: Discussions · pixijs/pixijs · GitHub[^] Or here: PixiJS & Friends[^]

Both discussion groups will know a lot more that we evidently do, given that this question has been open (and largely ignored) by this community for a whole day?
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900