Why is there a different behavior in browsers with flexbox and element in absolute position?
I am really going crazy with this problem:
I want to put a circle with a bottom border, in such a way that when having a mobile view (at least a width of 350px or less) it is centered, but it does NOT affect the margin of the view.
The test I am doing it in Angular but to avoid complexity I am testing it with this simple HTML code:
<html>
<head>
<title>Responsive Test</title>
</head>
<body>
<style type="text/css">
.home-circle-gray-bg {
border-radius: 50%;
border: 0.05rem dashed #000000;
width: 530px;
height: 530px;
position: absolute;
margin-top: 250px;
background-color: transparent;
right: 20%;
margin-left: 0px;
margin-right: 0px;
}
@media (max-width: 650px) {
.home-circle-gray-bg {
left: 50% !important;
transform: translate(-50%,-50%) !important;
}
}
.block {
display: flex;
flex-wrap: wrap;
background-color: yellow;
}
</style>
<div class="home-circle-gray-bg"></div>
<div class="block">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>
What is the problem?
I'm seeing this simple code in Firefox and having a width resolution of 350px, a horizontal scroll appears at the bottom of the screen (actually it appears much earlier, I would say that at 530px, which is the width of the circle), the div that contains the text is adapted according to the resolution, the left part of the circle is perfect, that is, it does not occupy a space but is behind it, as if it were a background and when reducing the width it goes more to the left, I want this same effect on the right side of the circle.
On the right side of the circle is the problem, it seems to always show and not move more to the right (like the left part) until it is hidden or seen less, I think this is caused by the "left: 50%", but then how can I solve the problem?
Testing this same code in Chrome is a totally different result, the circle shrinks according to the width of the screen.
Why is the result different in both browsers?
Is it possible to get what I want in both browsers?
Thanks!
After an exhaust search in Internet, I have found a solution and works in both browsers: Position:absolute causes horizontal scrollbar
The HTML code:
<html>
<head>
<title>Responsive Test</title>
</head>
<body>
<style type="text/css">
.home-circle-gray-bg {
border-radius: 50%;
border: 0.05rem dashed #000000;
width: 530px;
height: 530px;
position: absolute;
margin-top: 250px;
background-color: transparent;
right: 20%;
margin-left: 0px;
margin-right: 0px;
}
@media (max-width: 650px) {
.home-circle-gray-bg {
left: 50% !important;
transform: translate(-50%,-50%) !important;
}
}
.block {
display: flex;
flex-wrap: wrap;
background-color: yellow;
}
.wrapper {
width: 100%;
position: relative;
overflow: hidden;
height: 100%;
}
</style>
<div class="wrapper">
<div class="home-circle-gray-bg"></div>
<div class="block">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</body>
</html>
The behaviour is the same in Firefox and Chrome.