https://livepreview.adform.com/?tag=26052698&e=0&positioning=1%3Dx%3A0%2Cy%3A0%2Cs%3Afalse
Works in Chrome. But in Firefox and Safari I get the animation. But nothing is visible.
https://livepreview.adform.com/?tag=26052698&e=0&positioning=1%3Dx%3A0%2Cy%3A0%2Cs%3Afalse
Works in Chrome. But in Firefox and Safari I get the animation. But nothing is visible.
Seems, Firefox and Safari give a translate CSS from somewhere and adds:
transform: translateX(-150px) translateY(-300px) scaleX(0) scaleY(0);
to the Hype Object.
No one? I am a tad lost in translation.
It is a bit weird what I'm seeing and difficult to inspect from the source because the server environment is so dynamic. There's an odd bit of code in the main container:
<div class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
<!-- <script type="text/javascript" charset="utf-8" src="300x600_bmf_fam22k_04_sb.hyperesources/300x600bmffam22k04sb_hype_generated_script.js?57887"></script> -->
</div>
But the main container itself should be of type HYPE_document.
The main scene itself seems that in Safari/Firefox is collapsing down to a 0x0 dimension, whereas in Chrome it is being 300x600.
You're welcome to post a zip of your .hype document and the local steps you are doing to transform the ad before uploading to the adform preview environment. (This may offer clues, but the culprit might just be something in the environment itself).
I'd guess that the quickest fix would be to not use flexible layout. This is probably at least leading to the size being incorrect. If it is going to be a 300x600 ad, then you can just have it set to that and turn of the scene scale width/height settings.