However, The CSS I am using only works in Mozilla Firefox, not in Chrome or Mobile - However I thought I was using the same prefixes for webkits and moz.
The Z-Index of the Card Backs is 100, defined in the javascript. However, when I go into Chrome, the Z-Index is Ignored and the order in which the cards were placed takes authority.
Here's the CSS
- Code: Select all
.card {
position: absolute;
-webkit-perspective: 600px;
}
.cardback {
position: absolute;
width: 50px;
height: 50px;
background: url('../images/card_top.PNG') no-repeat;
background-size: 100% 100%;
background-origin:content-box;
background-position:bottom;
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
box-shadow: 0 1px 5px rgba(0,0,0,0.9);
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}
.cardback.fade {
opacity:0;
z-index: 0;
}
.cardback.unfade {
opacity:1;
}
.cardGood {
position: absolute;
opacity: 1;
width: 50px;
height: 50px;
background: url('../images/card_bot.PNG') no-repeat;
background-size: 100% 100%;
background-origin:content-box;
background-position:bottom;
}
.cardBad {
position: absolute;
width: 50px;
height: 50px;
background: url('../images/card_bad.PNG') no-repeat;
background-size: 100% 100%;
background-origin:content-box;
background-position:bottom;
}
And then the javascript that appends to the stage:
(Functions are called in this order)
- Code: Select all
drawCardBacks = function () {
playArea = document.getElementsByClassName('play-area')[0];
for (var y = 1; y <= rows; y++) {
for (var x = 1; x <= cols; x++) {
var container = document.createElement("div"),
sprite;
sprite = document.createElement("div");
dom.addClass(sprite, "cardback");
sprite.setAttribute('card-number', cardNumber);
sprite.style.zIndex =100;
sprite.style.height = "50px";
sprite.style.width = "50px";
sprite.style.left = ((x * spacing) + xPos) + "px";
sprite.style.top = ((y * spacing) + yPos) + "px";
container.appendChild(sprite);
sprite.innerHTML = cardNumber;
cardArray.push(sprite);
dom.addClass(container, "card");
playArea.appendChild(container);
cardNumber++;
}
}
}
drawWinningCards = function () {
winCards = game.logic.getPath();
var winCardNumber = 0;
for (var q = 0; q < winCards.length; q++) {
for (var i = 0; i < cardArray.length; i++) {
if (winCards[q] == cardArray.indexOf(cardArray[i])) {
var container = document.createElement("div"),
sprite;
sprite = document.createElement("div");
dom.addClass(sprite, "cardGood");
sprite.style.zIndex = 0;
sprite.style.height = "50px";
sprite.style.width = "50px";
sprite.style.left = cardArray[i].style.left;
sprite.style.top = cardArray[i].style.top;
sprite.innerHTML = winCardNumber;
winCardNumber++;
container.appendChild(sprite);
dom.addClass(container, "card");
playArea.appendChild(container);
goodCards.push(sprite);
}
}
}
}
drawLosingCards = function () {
wrongCards = game.logic.getWrongPath();
for (var q = 0; q < wrongCards.length; q++) {
for (var i = 0; i < cardArray.length; i++) {
if (wrongCards[q] == cardArray.indexOf(cardArray[i])) {
var container = document.createElement("div"),
sprite;
sprite = document.createElement("div");
dom.addClass(sprite, "cardBad");
sprite.style.zIndex = 0;
sprite.style.height = "50px";
sprite.style.width = "50px";
sprite.style.left = cardArray[i].style.left;
sprite.style.top = cardArray[i].style.top;
container.appendChild(sprite);
dom.addClass(container, "card");
playArea.appendChild(container);
badCards.push(sprite);
}
}
}
}
Any reason this would happen?
I can link an example if anyone is further interested in helping.