Giving that code:
.avatar {
font-size: 40px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 2em;
height: 2em;
border: .15em solid red;
border-radius: 50%;
overflow: hidden;
}
.avatar>img {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="avatar">
<img src="https://thispersondoesnotexist.com/image" alt="avatar">
</div>
resulting avatar have pixels of parent element between border and own background.
They're better visible in smaller sizes (and zoom levels), but they also exist in higher zoom.
And here in firefox:
I think it's a bug, but I tested it on multiple browsers (chrome, chrome mobile, Samsung internet browser, Firefox) and in every there was some kind of this behavior.
I've tried setting background to border color, but this only image it's not the best solution, because image is still distorted.
Setting image as background helps in chrome, but only if there is no <img> selector, and I need it, to don't have accessibility issues.
You know how to repair this? Or where to find bug ticket for this?
Related
Having a little trouble removing a very thin border that is appearing around our :before and :after elements. This only seems to appear on a mobile device - doesn't even pop up in Chrome's device tools.
Problem:
Here's how the HTML/CSS looks.
.container {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
padding: 100px 0px;
margin-bottom: 56px;
width: 100%;
}
container:after {
content: "";
background-image: url("$asset");
background-size: cover;
background-position: bottom;
position: absolute;
left: 0;
top: -15px;
width: 100%;
height: 16px;
border: 0;
outline: 0;
}
<div class="container">
<div class="bg"></div>
<section>
//Headings and Links here
</section>
</div>
I've tried making absolutely sure borders and outlines are set to none - and also adding and taking away a pixel or two from the top and bottom margins, but nothing really seems to work. It's also a bit inconsistent, the lines don't necessarily show on every page that the component is on.
Replace border: 0; with: border: none; very simple CSS Code. Also, the outline code is just for things like text, this has nothing to do with the border.
It's a chrome bug lads. Second answer here nailed it.
The solutions is reducing the height/width to 0 and putting padding in to account for the space instead. Seems to have worked in my case.
I have a block in a mat-table in Angular that makes a colored square.
When adjusting its height, e.g.
display: inline-block;
width: 10px;
height: 97%;
it works well in Chrome and Edge. However, it disappears in Firefox.
Setting the height to px makes it appear, i.e.
height: 65px;
Setting:
-moz-height:100%;
for the column class also makes it disappear in Firefox.
It seems that height must be set in Pixels for Firefox using 'height' or it disappears.
Even using:
-moz-height: 50px
doesn't keep it from disappearing from Firefox if height isn't present.
A useful alternative was em - it seems that whereas % doesn't work with Firefox - em works a bit like % across all browsers.
e.g. height:4em
However, the block does not extend vertically as much as it should - and it adds additional size to the row.
There are many instances of Chrome and Firefox rendering height differently, e.g. here, here, here, here, and here.
Perhaps, the most useful answer is here which explains why implementation varies across browsers.
The recommended solutions there are to ensure that parent element height has been set - as I did here:
//for the table
.example-table {
flex: 1 1 auto;
overflow-y: auto;
min-width: 100%;
height: 100%;
}
// for the mat-table in the table
.mat-table {
margin-bottom: 1rem;
display: table;
border-collapse: collapse;
min-width: 100%;
height: 100%;
}
And setting the box-sizing, e.g.:
-moz-box-sizing:content-box; or -moz-box-sizing:border-box;
The problem was with Firefox. One issue was that nested divs in any of the columns / cells affected Firefox rendering differently than Chrome and Edge (which worked as predicted).
Removing all nesting where possible helped somewhat. Using the -[moz-transform][1] methods helped make things more similar across browsers (though not emulating the same behavior).
This helped:
.block {
display: inline-block;
width: 30px;
vertical-align: middle;
-moz-transform: scaleY(1.2);
-moz-transform: translateY(5px);
height: 95%;
margin-top: 5px;
margin-bottom: 1px;
}
where the column is defined as:
td.mat-column-block {
flex-shrink: 1;
align-self: stretch;
vertical-align: center;
max-width: 50px;
min-width: 50px;
border-top: none;
height: 50px;
max-height: 50px;
min-height: 100%;
justify-self: stretch;
}
Here's a simple setup with two divs next to each other in a parent container which has a border while the two children have different background colors. There's also a codepen here:
.tag {
/* Also happens with .1rem */
border: 1px solid black;
display: inline-block;
height: 50px;
}
.key {
background: black;
color: white;
display: inline-block;
height: 100%;
width: 50px;
}
.value {
display: inline-block;
height: 100%;
width: 50px;
}
<div class="tag">
<div class="key"></div>
<div class="value"></div>
</div>
On Google Chrome when zooming in I get rendering issues like this (note the white line between the border and black div on the top/left edges):
I've tried various things like flexbox, using rem for the border width etc., but at best it changes at which zoom level and on which edge the issue appears. I assume this is some kind of sub-pixel rounding issue, but I wonder if there's any way to fix this.
I have one div with primitive styles
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 16px;
height: 16px;
box-sizing: border-box;
border: solid 1px #cfcfcf;
and :after pseudoelement on it
content: '';
display: flex;
width: 14px;
height: 14px;
background: #3fcaca;
border-radius: 50%;
But such divs look different in the different screen area. Browser zoom is 100%
I am using 15 inch full HD screen with windows up-scaling which obviously is the reason. Is there a way to fix such things by some CSS adjustments?
If you want to align things on top of an element with :after (or before:), set the parent element to position: relative; then set the :after to position: absolute;, then adjust top:, left:, to make things line up.
I found a very simple answer:
Just replace border with box-shadow. Sounds unusual, but box-shadow can generate absolutely same look as border and in same time looks always smooth. Even on pixel-scaled screens
It appears that a unicode emoji character overflows it's bounding box on a non-retina display, but it remains within the character bounds on a retina display. So how do I horizontally center an emoji in a div on both a retina and a non-retina display?
Non-Retina:
Retina:
This works on a retina screen, but is off a few px on a non-retina display:
<div style="text-align: center; width: 3rem; border: 1px solid red;">😃</div>
Here is a CodePen to try things https://codepen.io/anon/pen/GmzoNP. You will need a retina and non-retina screen to observe the problem.
Here are some of my ideas that I tried. I have not had success with them yet but I think the last two are on the right track:
Text-align center (it is text after all)
width: 0, 50% left margin, transform: translateX(-50%)...
Changing character width
Using a monospace font
A little context about how others have solved this problem - Slack and Google both just use images of emojis. This is not ideal in my case because it increases bundle size and and requires some extra logic to handle copy/paste.
I know it's a while since this question was asked but I've had the same problem and maybe my answer can help someone.
I could center the emoji by raising the font size to minimum size of 26px. With a minimum font size of 26px the emojis are centred on retina and not retina screens. In my final solution I raised the font size to 4em and then scaled it back down with transform: scale(0.25);.
Here are the experiments I made, which leaded me to my solution: https://codepen.io/faessler/pen/aRNOEY
If someone has a better/less dirty way, I would be happy to hear about it. :)
.fontSize span {
display: inline-block;
font-size: 26px;
}
/*BOX*/
.gridGroup {display:flex; margin-bottom:10px;}
.grid {position:relative; width:100px; height:50px; margin:0 10px 10px 0; border:1px solid blue; text-align:center;}
.grid:before {content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:2px; height:100%; background:red;}
<div class="gridGroup">
<div class="grid fontSize"><span>😃</span></div>
<div class="grid fontSize">bla <span>😃</span> bla</div>
</div>
In my case, a width a little bit greater than the font-size solved the problem. The parent div was centring with flex.
div.emojiIcons {
display: flex;
flex-direction: row;
justify-content: center;
}
span.emoji {
font-size: 24px;
width: 26px;
}
Here's a more semantic approach to it.
.emoji {
display: flex;
padding: 1rem;
border: 1px solid black;
position: relative;
}
.emoji::after {
content: "";
width: 1px;
height: 100%;
background-color: red;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%)
}
.align-center {
/* vertically center. */
align-items: center;
}
.justify-center {
/* horizontally center. */
justify-content: center;
}
<div class="emoji align-center justify-center">
🚀
</div>