font-size < 10px doesn't work `em` on Chrome

[BcRikko]

Describe the bug Does not see icons less than 10px on Chrome.

Expected behavior

Screenshots

Environment:

• OS: macOS High Sierra
• Browser: Chrome 71

Suggestion(s) for fixing this issue

Use transform: scale(xx) instead of em.

.nes-icon {
  &.is-small {
    transform: scale(0.5);
  }
  &.is-medium {
    transform: scale(1.5);
  }
  &.is-large {
    transform: scale(2);
  }
  &.heart {
    @include pixelize(...);
  }
}

[BcRikko]

ref #215

---

[BcRikko]

transform: scale() is not good. 😭

<h1>Original</h1>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>

<h1>transform: scale()</h1>
<div class="container scaled">
<div class="box">scale(1)</div>
<div class="box">scale(1.3)</div>
<div class="box">scale(1.5)</div>
<div class="box">scale(1.3)</div>
<div class="box">scale(1)</div>
</div>

<h1>margin-right, margin-bottom</h1>
<div class="container margined">
<div class="box">scale(1)</div>
<div class="box">scale(1.3)</div>
<div class="box">scale(1.5)</div>
<div class="box">scale(1.3)</div>
<div class="box">scale(1)</div>
</div>

* { box-sizing: border-box; }

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 2px solid;
  transform-origin: top left;
}

.scaled {
  > .box:nth-child(1) {
    transform: scale(1);
  }
  > .box:nth-child(2) {
    transform: scale(1.3);
  }
  > .box:nth-child(3) {
    transform: scale(1.5);
  }
  > .box:nth-child(4) {
    transform: scale(1.3);
  }
  > .box:nth-child(5) {
    transform: scale(1);
  }
}

.margined {
  > .box:nth-child(1) {
    transform: scale(1);
  }
  > .box:nth-child(2) {
    transform: scale(1.3);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  > .box:nth-child(3) {
    transform: scale(1.5);
    margin-right: 50px;
    margin-bottom: 50px;
  }
  > .box:nth-child(4) {
    transform: scale(1.3);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  > .box:nth-child(5) {
    transform: scale(1);
  }
}

[guastallaigor]

@BcRikko I could not reproduce this bug. I can see all the icons in all resolutions and zoom types in my Chrome.

Environment

• OS: Ubuntu 18.10
• Browser: Google Chrome Version 71.0.3578.98 (Official Build) (64-bit)
• Build environment (i.e. NodeJS): v10.15.0

Am I missing something?

[BcRikko]

How is the following code displayed in your environment?

<h2>font-size: 15px</h2>
<div class="parent" style="font-size: 15px;">
  <div class="child"></div>
</div>
<h2>font-size: 10px</h2>
<div class="parent" style="font-size: 10px;">
  <div class="child"></div>
</div>
<h2>font-size: 5px</h2>
<div class="parent" style="font-size: 5px;">
  <div class="child"></div>
</div>

<style>
.child {
  width: 10em;
  height: 10em;
  background-color: black;
}
</style>

If it is not the same as the screenshot, could you check the following settings. chrome://settings/fonts > minimum font size

[guastallaigor]

The browser configuration is different:

If I change the value like your image, I see the bug. But I thought mine was the default behavior, because for instance if I put like this:

All the blocks are going to be the same size:

So I'm a bit confused about this, but if you are sure this is a bug I understand it :+1:

[BcRikko]

Thanks 🙇 Umm.... It seems to be reproduced depending on the language and user settings.

It will be reproduced in the environment of at least Japanese users. 😭 So could you merge #264?

[BcRikko]

:tada: This issue has been resolved in version 2.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: