When previewing or exporting some of the .png files are not displaying in the latest version of Chrome (65.0.3325.181). I have cleared the browser cache many times but the issue persists.
This issue seems to have only appeared in the last week or so. I have previously been able to see the exact same hype files including the .png’s without any issue.
Can you point us to an example? Unless we can see this or people have had similar issues. It’s difficult to offer anything of help.
Have you a console log of any errors?
Thanks DBear, here’s a link to the example:
http://iflourish.co.uk/test-hype/the-golden-thread.html
I don’t haven’t any chrome errors on export
Ok. next question … which PNG’s are not displaying? Had a quick look at the link and doesn’t seem to be any problems.
Wondering which device has the issues instead of the browser. One possibility and this is a wild stab in the dark is that Hype optimises picture files for better resolution displays so perhaps if it’s viewed on one of these and the file is not included in the resources. This being said, I also had a look at your script and it looks like you’ve perhaps unticked “optimize when exporting”.
And, this would show a 404 not found in any console.
The first scene displays fine, but if you select continue and view the second scene there are thumbnails and speech bubbles missing. They display fine in Safari and Firefox but in Chrome they just don’t load.
Just had a look through the library in the source file and all the .png’s are checked ‘automatically optimize when exporting’
I’m beginning to wonder whether this is a problem with latest version of Chrome as this file was working fine a couple of weeks ago.
I looked using the latest version of Chrome and everything was fine! Just to clarify this is OSX 10.13.1 non-retina display
This could well be the fact that optimised images are not found. When you export and you have pmg's optimised by Hype, your resources folder should have a similar pattern to this:
myImage.png
myImage_2x.png
In your url you don't have the _2x.png images.
Perhaps this is the issue?
Thanks. Yes it could be. It’s a strange one as there are no x2 .png’s in the library yet some .png’s work fine. I’ll give it a go with this in mind and see it solves the problem.
This is a chrome rendering bug. It looks like chrome is having problems when you are scaling a group from 0% that contains an image – the inner image is never being rendered. From what I can tell this has been fixed in the Canary build of Chrome, so it should come to the Stable version eventually. Until then, there are a couple workarounds you can try:
I see the images in Chrome though 
Curious… I’m not.
Two iMacs - one running El Capitan & the other High Sierra - with latest version of Chrome on both [Version 65.0.3325.181 (Official Build) (64-bit)].
I can reproduce the bug on my 5k iMac but not my 13" MacBook Pro… interesting. Might be hardware-specific as it is a rendering issue.
@JimScott if you use the Canary build, does it appear fixed for you?
Yes. Both iMacs (El Capitan & High Sierra) with Chrome's Canary build display the images properly.
Thanks everyone. Thanks for highlighting the scaling issue. I have now started the group scaling at 1% for each group of objects and all the .png’s contained within those groups successfully render in chrome (I have uploaded the revised presentation to the link above).
Hopefully the Canary build when thats released will negate the need to start scaling at 1%. for now though that works and looks fine for the purposes I need.
My solution to (temporarily) fix the issue is to hide the backface of any div :
div {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
Cool! How did you discover that fix?
In the past I ran into the issue of getting some artifacts while animating a rotating div. I searched and done a lot testing with css tricks to get it to work, and finally come across this backface visibility solution. This time it was hard because it was random and could not test on my computer. I searched a lot again to understand what could be the problem, I finally understand it was related to Chrome, but in some random cases. Then I come across an article talking about 3d transform, scaling, problems with a bunch of solutions that was not really working in my case, but it also talked about things about the backface, so I remember my previous bug, tried it and it worked. So I didn’t invent the wheel buy worked a lot of time to make one!
Thanks! I am going to do some deeper looking into the Chrome bug on this and appeal to get it fixed sooner, but if not this might be a viable workaround in Hype’s runtime.
It looks like this was fixed in Chrome 66.
