grid or place-items bug: preview shows perfect match, only 66% after submition

[Naahuel]

Maybe this has been asked, I did search and didn't find anything.

I'm a Firefox in Ubuntu user.

For this game: https://cssbattle.dev/play/34
I submitted this code:

<div></div>
<style>
  body{
    background: #007065;
    display: grid; 
    place-items: center;
  }
  div {
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 125px 100px 125px;
    border-color: transparent transparent #FFEECF;
    transform: translateY(42px);
    filter: drop-shadow(0 50px 0 #F5C181) drop-shadow(0 50px 0 #00A79D);
  }
</style>

But it gives me 66.2%? Even though it matches perfectly.

I thought it didn't recognize the filter as a valid rule but if I comment it out I get a lower score! 184.7 (295 chars)

I noticed though that the display:grid + place-items:center doesn't always work! In fact it didn't now, because it didn't center the item vertically! So I centered differently (with fewer characters even haha) and now I get a 100%:

<div></div>
<style>
  body{
    background: #007065;
  }
  div {
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 125px 100px 125px;
    border-color: transparent transparent #FFEECF;
    margin: 0 auto;
    transform: translateY(42px);
    filter: drop-shadow(0 50px 0 #F5C181) drop-shadow(0 50px 0 #00A79D);
  }
</style>

So my guess is that the preview is displaying something different than what the interpreter in the back-end gets.
Something with place-items?

[aarthvaen]

Correct, the first solution is also working but it's displayed very different than what CSSBattle shows you. Your triangle is placed to the very bottom of the window (screenshot below).

To make your initial solution work, setting transform: translateY property value to -50px should do the job.

Considering you're playing CSSBattle via Firefox, and CSSBattle uses Chromium to render the solutions, I suggest using this previewer which shows you exactly how the server 'sees' your solutions.

[Naahuel]

Yeah that makes sense! Thank you for you reply!
That previewer is very cool, i'll be using it from now on :)