Hey guys, I’m trying to achieve a globe effect with a texture and a circle div. I set it to repeat horisontally.
Works great in file
On test looks like this
On safari and chrome… any idea why??
File attachedtest.zip (184.2 KB)
Looks good for me on Safari 9.0.1 and Chrome latest. Are you on Safari 8?
No, I’m on safari 9.01 as well. Deleting the object and reseting up the repetition seems to fix it ,but once the background image is updated in the library the repeat-x resets to scale to fit on publish. It still looks fine in hype. I think the only solution i found is to reset up the div every time i need to update the image. When i debug safari background position is set to repeatx but it doesn’t seem to visually reflect it.
Hmm.
I just tested this I get exactly what you are getting, one thing in Hype and another in the Preview.
I found hat setting the Horizontal Flexible layout on the image fixes the issue. !!
No heres the weird thing.
1, If I do the above. All is good.
2, If I then turn the Horizontal Flexible layout off I get the bad preview.
3, So now I turn the Horizontal Flexible layout on , I get the correct preview
4, If I then turn the Horizontal Flexible layout off I get the correct preview.
5, Close the project, close the preview.
6, open the project again. Horizontal Flexible layout off has auto saved.
7, preview = bad preview.
repeat of all of the above is consistent.
Also if I export where the preview was bad the exported html will be the same. And vice versa with a good preview and export.
So something is defiantly wrong here.
Yep i get the same thing,
also i tried all of that using a rectangle instead of a circle with borders set to 250 so it becomes one, same issues. Also with group masks converted into circles with visible style hidden. Every way most of the time the image will stretch and 10% of the time when you re import it it will behave normally on export. Very od.
I have a theory as to what this might be, but I need an export that reproduces it (I can’t repro myself). If you are seeing this, can you also try to export it, verify the problem is in the export, and then post a zip of the generated files?
Yep,
the below is an export of the above file
Still shows the same stretch in chrome and safari for me
test.zip (213.3 KB)
Heres the ones I have.
Both exports from the same Project. One working one not.
test.hype.zip (184.0 KB)
From the Same Project -workingOk.zip (244.6 KB)
From the Project -Notworking.zip (244.6 KB)
I’m actually not able to repro from those files either; in fact the working vs. not-working appear identical (and their export is identical as well). I tested more of my theory, and I don’t think it specifically holds up.
If you hit this, I’d like to inspect the DOM. To do this, can you open the web inspector in Safari, click the “elements” tab, and select the top-level HTML node and copy and paste that for me? (It should copy the entire DOM tree, which is what I need). Also if you can check the console log for any errors. Thanks!
Sure thing,
Here’s mine.
As mentioned it says repeat X but it still stretches it out.
I’m afraid thats all the info i have on this
I think he meant copy the text rather than a screen shot 
1 Like
durrr 
my bad
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
<title>test</title>
<style>
html {
height:100%;
}
body {
background-color: #FFFFFF;
margin:0;
height:100%;
}
</style>
<!-- copy these lines to your document head: -->
<meta name="viewport" content="user-scalable=yes, width=480">
<!-- end copy -->
<script type="text/javascript" charset="utf-8" src="test.hyperesources/HYPE-466.thin.min.js"></script>
<div> <style id="" type="text/css">.HYPE_element{-webkit-transform:rotateY(0);}video.HYPE_element{-webkit-transform:none;}.HYPE_scene {color:#000;font-size:16px;font-weight:normal;font-family:Helvetica,Arial,Sans-Serif;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;text-align:left;text-transform:none;text-indent:0;text-shadow:none;line-height:normal;letter-spacing:normal;white-space:normal;word-spacing:normal;vertical-align:baseline;border:none;background-color:transparent;background-image:none;-webkit-font-smoothing:antialiased;-moz-backface-visibility:hidden;}</style> </div><div> <style id="" type="text/css">.HYPE_scene div,.HYPE_scene span,.HYPE_scene applet,.HYPE_scene object,.HYPE_scene iframe,.HYPE_scene h1,.HYPE_scene h2,.HYPE_scene h3,.HYPE_scene h4,.HYPE_scene h5,.HYPE_scene h6,.HYPE_scene p,.HYPE_scene blockquote,.HYPE_scene pre,.HYPE_scene a,.HYPE_scene abbr,.HYPE_scene acronym,.HYPE_scene address,.HYPE_scene big,.HYPE_scene cite,.HYPE_scene code,.HYPE_scene del,.HYPE_scene dfn,.HYPE_scene em,.HYPE_scene img,.HYPE_scene ins,.HYPE_scene kbd,.HYPE_scene q,.HYPE_scene s,.HYPE_scene samp,.HYPE_scene small,.HYPE_scene strike,.HYPE_scene strong,.HYPE_scene sub,.HYPE_scene sup,.HYPE_scene tt,.HYPE_scene var,.HYPE_scene b,.HYPE_scene u,.HYPE_scene i,.HYPE_scene center,.HYPE_scene dl,.HYPE_scene dt,.HYPE_scene dd,.HYPE_scene ol,.HYPE_scene ul,.HYPE_scene li,.HYPE_scene fieldset,.HYPE_scene form,.HYPE_scene label,.HYPE_scene legend,.HYPE_scene table,.HYPE_scene caption,.HYPE_scene tbody,.HYPE_scene tfoot,.HYPE_scene thead,.HYPE_scene tr,.HYPE_scene th,.HYPE_scene td,.HYPE_scene article,.HYPE_scene aside,.HYPE_scene canvas,.HYPE_scene details,.HYPE_scene embed,.HYPE_scene figure,.HYPE_scene figcaption,.HYPE_scene footer,.HYPE_scene header,.HYPE_scene hgroup,.HYPE_scene menu,.HYPE_scene nav,.HYPE_scene output,.HYPE_scene ruby,.HYPE_scene section,.HYPE_scene summary,.HYPE_scene time,.HYPE_scene mark,.HYPE_scene audio,.HYPE_scene video{color:inherit;font-size:inherit;font-weight:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-variant:inherit;text-decoration:inherit;text-align:inherit;text-transform:inherit;text-indent:inherit;text-shadow:inherit;line-height:inherit;letter-spacing:inherit;white-space:inherit;word-spacing:inherit;vertical-align:inherit;border:none;background-color:transparent;background-image:none;padding:0;}.HYPE_scene p{display:block;margin:1em 0;}.HYPE_scene div,.HYPE_scene layer{display:block;}.HYPE_scene article,.HYPE_scene aside,.HYPE_scene footer,.HYPE_scene header,.HYPE_scene hgroup,.HYPE_scene nav,.HYPE_scene section{display:block;}.HYPE_scene blockquote{display:block;margin:1em 40px;}.HYPE_scene figcaption{display:block;}.HYPE_scene figure{display:block;margin:1em 40px;}.HYPE_scene q{display:inline;}.HYPE_scene q:before{content:open-quote;}.HYPE_scene q:after{content:close-quote;}.HYPE_scene center{display:block;text-align:center;}.HYPE_scene hr{display:block;margin:.5em auto;border-style:inset;border-width:1px;}.HYPE_scene h1,.HYPE_scene h2,.HYPE_scene h3,.HYPE_scene h4,.HYPE_scene h5,.HYPE_scene h6{display:block;margin-left:0;margin-right:0;font-weight:bold;}.HYPE_scene h1{font-size:2em;margin-top:.67em;margin-bottom:.67em;}.HYPE_scene h2{font-size:1.5em;margin-top:.83em;margin-bottom:.83em;}.HYPE_scene h3{font-size:1.17em;margin-top:1em;margin-bottom:1em;}.HYPE_scene h4{margin-top:1.33em;margin-bottom:1.33em;}.HYPE_scene h5{font-size:.83em;margin-top:1.67em;margin-bottom:1.67em;}.HYPE_scene h6{font-size:.67em;margin-top:2.33em;margin-bottom:2.33em;}.HYPE_scene table{display:table;border-collapse:separate;border-spacing:2px;border-color:gray;}.HYPE_scene thead{display:table-header-group;vertical-align:middle;border-color:inherit;}.HYPE_scene tbody{display:table-row-group;vertical-align:middle;border-color:inherit;}.HYPE_scene tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit;}.HYPE_scene col{display:table-column;}.HYPE_scene colgroup{display:table-column-group;}.HYPE_scene tr{display:table-row;vertical-align:inherit;border-color:inherit;}.HYPE_scene td,.HYPE_scene th{display:table-cell;vertical-align:inherit;}.HYPE_scene th{font-weight:bold;}.HYPE_scene caption{display:table-caption;text-align:center;}.HYPE_scene ul,.HYPE_scene menu,.HYPE_scene dir{display:block;list-style-type:disc;margin:1em 0;padding-left:40px;}.HYPE_scene ol{display:block;list-style-type:decimal;margin:1em 0;padding-left:40px;}.HYPE_scene li{display:list-item;margin:0;}.HYPE_scene ul ul,.HYPE_scene ol ul{list-style-type:circle;}.HYPE_scene ol ol ul,.HYPE_scene ol ul ul,.HYPE_scene ul ol ul,.HYPE_scene ul ul ul{list-style-type:square;}.HYPE_scene dd{display:block;margin-left:40px;}.HYPE_scene dl{display:block;margin:1em 0;}.HYPE_scene dt{display:block;}.HYPE_scene ol ul,.HYPE_scene ul ol,.HYPE_scene ul ul,.HYPE_scene ol ol{margin-top:0;margin-bottom:0;}.HYPE_scene u,.HYPE_scene ins{text-decoration:underline;}.HYPE_scene strong,.HYPE_scene b{font-weight:bolder;}.HYPE_scene i,.HYPE_scene cite,.HYPE_scene em,.HYPE_scene var,.HYPE_scene address{font-style:italic;}.HYPE_scene tt,.HYPE_scene code,.HYPE_scene kbd,.HYPE_scene samp{font-family:monospace;}.HYPE_scene pre,.HYPE_scene xmp,.HYPE_scene plaintext,.HYPE_scene listing{display:block;font-family:monospace;white-space:pre;margin:1em 0;}.HYPE_scene mark{background-color:yellow;color:black;}.HYPE_scene big{font-size:larger;}.HYPE_scene small{font-size:smaller;}.HYPE_scene s,.HYPE_scene strike,.HYPE_scene del{text-decoration:line-through;}.HYPE_scene sub{vertical-align:sub;font-size:smaller;}.HYPE_scene sup{vertical-align:super;font-size:smaller;}.HYPE_scene nobr{white-space:nowrap;}.HYPE_scene a{color:blue;text-decoration:underline;cursor:pointer;}.HYPE_scene a:active{color:red;}.HYPE_scene noframes{display:none;}.HYPE_scene frameset,.HYPE_scene frame{display:block;}.HYPE_scene frameset{border-color:inherit;}.HYPE_scene iframe{border:0;}.HYPE_scene details{display:block;}.HYPE_scene summary{display:block;}</style> </div></head>
<body>
<!-- copy these lines to your document: -->
<div id="test_hype_container" style="margin: auto; position: relative; width: 480px; height: 670px; overflow: hidden; -webkit-transform-style: flat;" aria-live="polite" hyp_dn="test" aria-hidden="false">
<div id="HYPE_persistent_symbols" aria-hidden="true" style="display: none;"></div><div class="HYPE_scene" id="hype-scene-7owTWdxMmm1XJKJD" hype_scene_index="0" aria-hidden="false" aria-flowto="hype-obj-YHKXCoq6Seqb2Jld" style="background-color: rgb(255, 255, 255); display: block; overflow: hidden; position: absolute; width: 480px; top: 0px; left: 0px; height: 670px; transform-origin: 50% 50%; z-index: 1; opacity: 1;"><div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 2;"><div class="HYPE_element" id="hype-obj-YHKXCoq6Seqb2Jld" aria-flowto="hype-obj-hh8hh52C91J3OoHt" style="pointer-events: auto; position: absolute; border: 0px none rgb(216, 221, 228); background-image: url(file:///Users/ldee/Downloads/test/test.hyperesources/backer.jpg); border-bottom-left-radius: 50%; overflow: visible; border-bottom-right-radius: 50%; z-index: 2; border-top-left-radius: 50%; border-top-right-radius: 50%; width: 228px; height: 228px; top: 81px; left: 118px; background-repeat: no-repeat;"></div></div><div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 1;"><div class="HYPE_element" id="hype-obj-hh8hh52C91J3OoHt" style="pointer-events: auto; position: absolute; background-image: url(file:///Users/ldee/Downloads/test/test.hyperesources/bg.png); overflow: visible; background-size: 100%; -webkit-background-size: 100%; display: inline; z-index: 1; width: 482px; height: 617px; top: 0px; left: 0px; background-repeat: no-repeat no-repeat;"></div></div></div></div>
<!-- end copy -->
<script type="text/javascript" charset="utf-8">
// HYPE.documents["test"]
(function(){(function k(){var f="test.hyperesources",d="test",c="test_hype_container";if(false==!1)try{for(var g=document.getElementsByTagName("script"),a=0;a<g.length;a++){var b=g[a].src;if(null!=b&&-1!=b.indexOf("test_hype_generated_script.js")){f=b.substr(0,b.lastIndexOf("/"));break}}}catch(m){}if(true==!1&&null==window.HYPE_466)null==window.HYPE_dtl_466?(window.HYPE_dtl_466=[],window.HYPE_dtl_466.push(k),d=document.getElementsByTagName("head")[0],c=document.createElement("script"),
a=navigator.userAgent.match(/MSIE (\d+\.\d+)/),a=parseFloat(a&&a[1])||null,c.type="text/javascript",c.src=f+"/"+(!0==(null!=a&&10>a||false==!0)?"HYPE-466.full.min.js":"HYPE-466.thin.min.js"),d.appendChild(c)):window.HYPE_dtl_466.push(k);else{window.HYPE_dtl_466=[];g=window.HYPE.documents;if(null!=g[d]){b=1;a=d;do d=""+a+"-"+b++;while(null!=g[d]);for(var e=document.getElementsByTagName("div"),b=!1,a=0;a<e.length;a++)if(e[a].id==c&&null==e[a].getAttribute("HYP_dn")){var b=
1,h=c;do c=""+h+"-"+b++;while(null!=document.getElementById(c));e[a].id=c;b=!0;break}if(!1==b)return}b=[];b=[];e={};h={};for(a=0;a<b.length;a++)try{h[b[a].identifier]=b[a].name,e[b[a].name]=eval("(function(){return "+b[a].source+"})();")}catch(l){window.console&&window.console.log(l),e[b[a].name]=function(){}}f=new HYPE_466(d,c,{"3":{p:1,n:"texture.jpg",g:"8",t:"@1x"},"1":{p:1,n:"backer.jpg",g:"7",o:true,t:"@1x"},"2":{p:1,n:"backer%402x.jpg",g:"7",o:true,t:"@2x"},"0":{p:1,n:"bg.png",g:"4",t:"@1x"}},f,[],e,[{n:"Untitled Scene",o:"1",X:[0]}],[{o:"3",p:"600px",x:0,cA:false,Z:670,Y:480,c:"#FFFFFF",L:[],bY:1,d:480,U:{},T:{kTimelineDefaultIdentifier:{i:"kTimelineDefaultIdentifier",n:"Main Timeline",z:0,b:[],a:[],f:30}},bZ:180,O:["11","10"],v:{"11":{p:"repeat-x",c:228,d:228,I:"None",J:"None",K:"None",L:"None",h:"7",M:0,N:0,aI:"50%",A:"#D8DDE4",x:"visible",j:"absolute",O:0,aJ:"50%",k:"div",C:"#D8DDE4",z:2,B:"#D8DDE4",D:"#D8DDE4",aK:"50%",P:0,a:118,aL:"50%",b:81},"10":{h:"4",p:"no-repeat",x:"visible",a:0,q:"100% 100%",b:0,j:"absolute",r:"inline",c:482,k:"div",z:1,d:617}}}],{},h,{},
0,false,false,true,-1,true,true,true);g[d]=f.API;document.getElementById(c).setAttribute("HYP_dn",d);f.z_o(this.body)}})();})();
</script>
</body></html>
Thanks, I figured it out!
I wasn’t able to reproduce because this is primarily noticeable on non-retina displays (all my dev machines are retina 
) . @Luckyde, it looks like you might be using a plugin for development that tests non-retina?
The issue is that Hype’s automatic image optimization doesn’t take into account background repeat, and blissfully resizes images to make retina and non-retina variants. In the case of background repeating though, the image size isn’t tied to the element size, so it was being resized wrongly and thus looked incorrect especially at the small sizes.
The reason @MarkHunte was able to see a difference with the flexible layout is that with some flag configurations we won’t automatically resize the images as we don’t know what the end result might be in a flexile layout.
Long story short - the workaround is to uncheck “Automatically optimize when exporting” for that image in the resources library.
I have a fix for the next released version of Hype.
Thanks for supplying all the details!
3 Likes
Great Job Team Tumult!
1 Like