Having some trouble with this code - it seems to be working fine in most browsers, but Firefox is giving me a headache. I've tried using the moz abbreviations in CSS and JS tweaks, but no luck. Is there a property that Mozilla Firefox doesn't support or am I missing something? Any help would be appreciated.
// CSS:
html, body{
width:100%;
height:100%;
margin: 0 auto;
padding: 0;
}
body * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
header{
text-align: center;
}
header > h1{
text-shadow: 1px 1px 1px #888, 1px 1px 1px #EEE;
font-size: 10pt;
color: white;
}
header > h2{
font-size: 10pt;
color: black;
}
header > nav > ul{
display:-moz-box;
-moz-box-orient:horizontal;
display:-webkit-box;
-webkit-box-orient:"horizontal";
margin: 0 auto;
padding: 0;
list-style:none;
width: 300px;
height: 60px;
position: relative;
z-index: 2;
}
header > nav > ul > li{
-webkit-box-flex: 1;
-webkit-user-select: none;
-moz-box-flex: 1;
-moz-user-select: none;
}
#carousel{
-webkit-perspective: 800px;
-moz-perspective: 800px;
background: black;
padding: 0;
text-align: center;
margin: 0 auto;
border: 1px solid gray;
box-shadow: 3px 3px 7px #777;
}
#carousel > div{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
padding: 0;
}
#carousel > div > ul{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
margin: auto auto;
padding: 0;
background: transparent;
}
#carousel ul li{
list-style: none;
position: absolute;
}
// JS important part:
function Element(id, width, height, params){
this.width = width;
this.height = height;
this.rotateX = params.rotate.x;
this.rotateY = params.rotate.y;
this.rotateZ = params.rotate.z;
this.margin = 10;
this.translateX = params.translate.x;
this.translateY = params.translate.y;
this.translateZ = -(params.translate.z + this.margin);
var dom = document.createElement("li");
dom.style.display = "-moz-box";
dom.style.mozBoxOrient = "vertical";
dom.style.width = this.width+"px";
dom.style.height = this.height+"px";
dom.style.padding = "10px";
dom.style.background = "00ff00";
dom.style.opacity = "0.8";
//use flex
var imgObj = getImageUrl();
var img = document.createElement("div");
img.style.mozBoxFlex = "10";
img.style.background = "url("+imgObj.url+") no-repeat white";
img.style.mozBackgroundSize = "100% 100%";
var title = document.createElement("div");
title.style.mozBoxFlex = "1";
title.style.textAlign = "center";
title.style.paddingTop = "5px";
title.textContent = imgObj.title;
title.style.background = "#2e3231";
title.style.color = "white";
dom.appendChild(img);
dom.appendChild(title);
// dom.style.opacity = "0.8";
dom.style.mozUserSelect = "none";
dom.id = id;
dom.addEventListener("click", elementClickHandler);
dom.style.mozTransform = "rotateY("+this.rotateY+"rad) translateY("+this.translateY+"px) translateZ("+this.translateZ+"px)";
this.getElement = function(){
return dom;
}
this.update = function(){
dom.style.mozTransform = "rotateY("+this.rotateY+"rad) translateY("+this.translateY+"px) translateZ("+this.translateZ+"px)";
}