Hello,
I’m using https://github.com/pakastin/deck-of-cards.
When I clic on a card I use a transform scale.
But my problem is that my card and my text is pixelated :
And I can’t play with width/height because it broke my animation.
Any ideas ?
Hello,
I’m using https://github.com/pakastin/deck-of-cards.
When I clic on a card I use a transform scale.
But my problem is that my card and my text is pixelated :
And I can’t play with width/height because it broke my animation.
Any ideas ?
I tested on Android and the scale working without pixelated my svg & text, it’s a IOS problem
It’s a browser problem unfortunately. There are different solutions for these kind of problems out there. Check these links out:
Thank you for your help.
But it doesn’t work.
Maybe because i’m using this engine : https://github.com/apache/cordova-plugin-wkwebview-engine
It doesn’t work is a little bit vague. Which of the proposed solutions didn’t work for you? Can you reproduce this in Safari maybe and setup a little example? Without code and an explicit reproduction of the problem (accept for an image) it’s hard to really help you.
I tried this :
.scale-card {
-moz-transform: scale(4) !important;
-o-transform: scale(4) !important;
-webkit-transform: scale(4) !important;
transform: scale(4) !important;
-webkit-background-clip: padding-box !important;
background-clip: padding-box !important;
}
I’m gonna try in Safari
You right, in Safari, there is the same problem
How can I setup a little example with Safari ?
It was because I used transform scale on the parent of the div with the svg background
Unfortunately it can’t work with the children div because the animation doesn’t work.
My game.ts
import { NavController, NavParams } from 'ionic-angular';
import Deck from 'deck-of-cards';
@Component({
selector: 'page-game',
templateUrl: 'game.html',
})
export class GamePage implements OnInit {
public container: any;
public deck = Deck();
public countLimit: number = 0;
public limit: number = 3;
public questions: any;
constructor(private navParams: NavParams, public navCtrl: NavController, public el: ElementRef, public renderer: Renderer) {
this.questions = navParams.get('questionsData');
}
shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
ngOnInit() {
var self = this;
var questions = this.shuffle(this.questions);
this.container = this.el.nativeElement.querySelector('#container-game');
// var overlay = this.el.nativeElement.querySelector('.overlay');
this.deck.mount(this.container);
this.deck.bysuit();
// LOOP INTO ALL CARDS
this.deck.cards.forEach(function(card, i) {
// ASSIGN CARD QUESTION TO A QUESTION FROM HOME.QUESTIONS.TS
card.question = questions[card.i];
// REMOVE CARD IF THERE IS NO QUESTION TO ASSIGN
if (typeof card.question == 'undefined') {
card.$el.parentElement.removeChild(card.$el);
}
// LISTEN EVENT TOUCH FOR THE CARD
self.renderer.listen(card.$el, 'touchstart', (e) => {
// END OF THE GAME
if (self.countLimit == 2 && card.selected == true) {
// self.navCtrl.pop();
card.$el.parentElement.removeChild(card.$el);
self.countLimit++;
}
// LIMIT THE NUMBERS OF CARD TO TAKE
else if (self.countLimit < self.limit) {
if (card.selected == true) {
card.$el.parentElement.removeChild(card.$el);
}
// IF SIDE IS FRONT SET SIDE TO BACK
if (card.side == 'front') {
card.setSide('back');
card.$el.style.zIndex = card.$el.style.zIndex -= 1;
// INCREASE COUNT LIMIT
setTimeout(() => {
self.countLimit++;
}, 100);
}
// IF SIDE IS BACK SET SIDE TO FRONT
else if (card.side == 'back') {
card.setSide('front');
card.selected = true;
// INSCREASE ZINDEX FOR VISIBILITY
card.$el.style.zIndex = card.$el.style.zIndex += 1;
// CHECK IF DIV EXIST ALREADY;
if (!card.$el.firstChild.firstChild) {
// CREATE A DIV FOR THE QUESTION
var div = document.createElement('div');
// ADD CLASS TEXT TO THE DIV
div.classList.add('text');
// PUT THE QUESTION INTO VAR TEXT
var text = document.createTextNode(card.question);
// CHILD OF CARD ELEMENT
card.$el.firstChild.appendChild(div);
// PUT THE QUESTION INTO THE DIV
div.appendChild(text);
// CENTER THE CARD
card.animateTo({
delay: 0,
duration: 300,
x: 0,
y: 0,
z: 0
});
card.$el.classList.add('scale-card');
}
}
}
});
});
}
}
page-game {
.scroll-content {
background: #2363aa;
color: #333;
font-family: 'Montserrat', sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.overlay {
background: rgba(0,0,0,0.5);
width: 100vw;
height: 100vh;
z-index: 9;
display: none;
}
#container-game {
position: fixed;
top: 50%;
left: calc(50% - 0.5rem);
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.container-title {
color: #fff;
font-weight: 600;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
.top, .bottom {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
}
.top {
margin-top: 12px;
}
.bottom {
align-items: flex-end;
margin-bottom: 12px;
}
}
.scale-card {
transform: scale(5) !important;
transition: 300ms;
}
.card {
position: absolute;
display: inline-block;
left: -1.9375rem;
top: -2.75rem;
width: 3.875rem;
height: 5.5rem;
background-color: #fff;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
box-shadow: 0 1px 1px rgba(0,0,0,0.15);
cursor: default;
&:before,
&:after {
position: absolute;
font-size: 4rem;
text-align: center;
line-height: 4rem;
font-family: 'Ubuntu Condensed', sans-serif;
white-space: pre-line;
width: 0.55rem;
letter-spacing: -0.1rem;
}
&:before {
top: 0.15rem;
left: 10px;
}
&:after {
bottom: 0.1rem;
right: 10px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.face {
height: 100%;
background-position: 50% 50%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
font-size: 6px;
text-align: center;
display: flex;
align-items: center;
background-image: url("../assets/img/faces/card_face.svg");
.text {
margin: 0 15px 0 15px;
}
}
.back {
position: absolute;
background-image: url("../assets/img/faces/card_back.svg");
background-position: 50% 50%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.clubs,
.spades {
color: #000;
}
}
I tried :