-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
font-size < 10px doesn't work em
on Chrome
#262
Comments
ref #215 |
em
on Chrome
<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);
}
} |
use transform:scale() instead of font-size & em fix #262
@BcRikko I could not reproduce this bug. I can see all the icons in all resolutions and zoom types in my Chrome. Environment
Am I missing something? |
use transform:scale() instead of font-size & em fix #262
The browser configuration is different: If I change the value like your image, I see the bug. 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 👍 |
Thanks 🙇 It will be reproduced in the environment of at least Japanese users. 😭 |
🎉 This issue has been resolved in version 2.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Describe the bug
Does not see icons less than 10px on Chrome.
Expected behavior
Screenshots
Environment:
Suggestion(s) for fixing this issue
Use
transform: scale(xx)
instead ofem
.The text was updated successfully, but these errors were encountered: