Transform scale : Svg & text pixelated


#1

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 ?


#2

I tested on Android and the scale working without pixelated my svg & text, it’s a IOS problem


#3

It’s a browser problem unfortunately. There are different solutions for these kind of problems out there. Check these links out:

http://www.css-101.org/articles/-webkit-transform-rotate-and-anti-aliasing/rotate-creates-jagged-border-image.php


#4

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


#5

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.


#6

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


#7

You right, in Safari, there is the same problem


#8

How can I setup a little example with Safari ?


#9

It was because I used transform scale on the parent of the div with the svg background


#10

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;
            }

          }

#11

I tried :

  • translateZ(0), translate3d, scale3d, backface-visibility, font smoothing, zoom and many other without anything working