Chrome weird CSS issue, works fine on Firefox - html

Question

I am wondering why there is a significant difference in rendering CSS between Chrome and Firefox. In case of Chrome, the child element is not taking full width and height (black color of parent can be seen at top and left side of child). In case of Firefox, the edges are smooth and child's dimensions are the same as of parent. I have no idea why is this happening.
These are the screenshots on Chrome and Firefox to demonstrate:
Chrome:
Firefox:
Below is my code:
* {
margin: 0;
padding: 0;
}
.parent {
position: relative;
width: 200px;
height: 200px;
border: 10px solid white;
background-color: black;
}
.child {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: lightcoral;
}
<div class="parent">
<div class="child">Content</div>
</div>
I just want to know why this is happening and how it can be fixed so that it looks the same in all browsers.
PS: Use hardware acceleration when available is ON

Answer 1

Hey brother there are many transitions and stylings that works on only chrome and not on the Firefox ,
same is the case with firefox , (many transitions work on firefox but not on chrome) so the thing is , chrome and firefox has some different properties so you have to search on official docs or google to check which property will work on chrome and which will work on firefox
hope this makes sense
i will attach a code snippet that shows different transition properties for different browsers
text.identity{
transform: translate(74px,0px);
-ms-transform: translate(74px,0px); /* IE 9 */
-webkit-transform: translate(74px,0px); /* Safari and Chrome */
-moz-transform: translate(74px,0px); /* Firefox */
-o-transform: translate(74px,0px); /* Opera */
}
these are some transition properties for different browsers and this is for just an example
these lines works same but on their respective browser
Happy Coding!!

Answer 2

The black lines seem to occur because of the border being set on the parent.
While I don't entirely understand why this happens on some browsers and not others, and why it happens at some zoom levels and not others (at least on Chrome/Edge on Windows 10 on my laptop) I suspect it's because of the way the browser calculates the boundaries of a CSS border.
We aren't seeing a whole CSS pixel but what looks like a slimmer, perhaps one screen pixel width, line of black. And this can disappear, or one is shown on the right/bottom instead of left/top border, when zoom is increased or decreased. It's as if the algorithm for calculating where the border actually is in terms of screen pixels takes, for example, the n screen pixels used for one CSS pixel and takes the mid-point. I haven't found any explanation of what algorithms are used though.
Anyway, one observation which may or may not help in this practical situation is that if border is replaced with margin then there are no black lines.
* {
margin: 0;
padding: 0;
}
.parent {
position: relative;
width: 200px;
height: 200px;
background-color: black;
/*border: 10px solid white;*/
margin: 10px;
}
.child {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
background-color: lightcoral;
}
<div class="parent">
<div class="child">Content</div>
</div>

Answer 3

I have faced this issue before, In some cases when we use absolute position so it does not fit into the relative box in some browsers, so the solution for this is that you can add outline property in the element which has absolute position.
Pleas check below code:-
.child {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: lightcoral;
outline: 1px solid #fff;
}
Just replace your child element css with above code and let me know if it works.