I have a site that have been working just fine for a long time, today one of my colleagues told me that after updating to latest version of chrome the site broke in a couple of places.
I have created a quick small sample of the issue using the html and css used. The problem seems to be related to using columns (as far as I can figure out)
* {
box-sizing: border-box;
}
.small-container[data-v-08ab2d5a] {
max-width: 800px;
margin: 0 auto;
}
.article[data-v-08ab2d5a] {
-moz-column-count: 2;
column-count: 2;
grid-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
.article .text-row__column[data-v-08ab2d5a] {
padding: 10px 0;
flex: 0 0 50%;
order: 0!important;
font-family: Inter;
font-size: 16px;
font-weight: 400;
font-stretch: normal;
font-style: normal;
letter-spacing: -.16px;
text-align: left;
color: #1d1f27;
line-height: 24px;
}
[data-v-08ab2d5a] .style-success-story-quote {
font-family: Inter;
font-size: 22px;
font-weight: 700;
font-stretch: normal;
font-style: normal;
line-height: 1.14;
letter-spacing: -.63px;
color: #f4a331;
padding-top: 30px;
}
.summary-image-outer[data-v-08ab2d5a] {
padding: 0 50px;
margin-top: 0;
width: 100%;
}
.summary-image-wrapper[data-v-08ab2d5a] {
padding-top: 100%;
position: relative;
width: 100%;
background: red;
}
.summary-image-wrapper .summary-image[data-v-08ab2d5a] {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-size: cover;
background-position: 50%;
border-radius: 50%;
background-color: green;
}<div data-v-08ab2d5a="">
<article data-v-08ab2d5a="">
<div data-v-08ab2d5a="">
<div data-v-08ab2d5a=""><strong data-v-08ab2d5a="">
A fertile environment for talent to grow
</strong>
<p data-v-08ab2d5a="">When asked, team members nearly always say the best thing about working at Xxxx Xxxxx is the people. Not only do they form strong relationships, but they appreciate each other’s talents and the opportunity to learn from one another. As Xxxxxxx
(Training Specialist) says; <br></p>
</div>
</div>
<div data-v-08ab2d5a="">
<div data-v-08ab2d5a="">
<!---->
<p data-v-08ab2d5a="">“It’s really inspiring to work with talented people.”</p>
</div>
</div>
<div data-v-08ab2d5a="">
<div data-v-08ab2d5a="">
<div data-v-08ab2d5a="">
<div style="" data-v-08ab2d5a=""></div>
</div>
</div>
</div>
<div data-v-08ab2d5a="">
<div data-v-08ab2d5a="">
<!---->
<p data-v-08ab2d5a="">A close second is the opportunity to learn and grow within the organisation. Xxxxx (Data and Insights Manager) commented that, “at Xxxx Xxxxx you keep growing...working here broadens your mind and you start to think differently.” This also seems
to be one of the reasons that people choose to work for Xxxx Xxxxx with Xxxxx (Product Designer), one of our newest team members, saying he was attracted to the “very fertile environment in terms of learning and developing.”<br><br>One of the
other reasons people choose to work at Xxxx Xxxxx is their experience through the recruitment process. Through my own process of joining the company, I got the sense that the people I came into contact with were very genuine and very real. Overall
it seemed like people really care about the company, the people and the products they co-create.<br><br>My first impression seems to be an accurate reflection of how other team members feel, as they frequently mention how emotionally invested
they are in their work, their team and the success of the business. There is a culture of care and a sense that everybody feels they are part of something bigger than themselves. Now that I have been in the team for a few months, I have a feeling
people take their work seriously but they don’t take themselves too seriously. There isn’t anyone with a big ego and the culture is team-oriented.</p>
</div>
</div>
<div data-v-08ab2d5a="">
<div data-v-08ab2d5a="">
<!---->
<p data-v-08ab2d5a="">“I have a feeling people take their work seriously but they don’t take themselves too seriously.”<br></p>
</div>
</div>
</article>
</div>https://jsfiddle.net/xeb3rLcg/1/
In all browser the green ball is perfectly inside of the red box, while in latest chrome the ball is offset with it's height.
CodePudding user response：
Can confirm that the latest Chrome version broke this.
(102.0.5005.61)
It's caused by the summary-image-wrapper being a display: block.
Apply the following CSS rule to change it to display: inline-block to fix the issue:
.summary-image-wrapper[data-v-08ab2d5a] {
padding-top: 100%;
position: relative;
width: 100%;
background: red;
display: inline-block;
}
* {box-sizing: border-box; }
.small-container[data-v-08ab2d5a] {max-width: 800px; margin: 0 auto; }
.article[data-v-08ab2d5a] {-moz-column-count: 2; column-count: 2; grid-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; }
.article .text-row__column[data-v-08ab2d5a] {padding: 10px 0; flex: 0 0 50%; order: 0!important; font-family: Inter; font-size: 16px; font-weight: 400; font-stretch: normal; font-style: normal; letter-spacing: -.16px; text-align: left; color: #1d1f27; line-height: 24px; } [data-v-08ab2d5a] .style-success-story-quote {font-family: Inter; font-size: 22px; font-weight: 700; font-stretch: normal; font-style: normal; line-height: 1.14; letter-spacing: -.63px; color: #f4a331; padding-top: 30px; }
.summary-image-outer[data-v-08ab2d5a] {padding: 0 50px; margin-top: 0; width: 100%; }
.summary-image-wrapper[data-v-08ab2d5a] {
padding-top: 100%;
position: relative;
width: 100%;
background: red;
display: inline-block;
}
.summary-image-wrapper .summary-image[data-v-08ab2d5a] {position: absolute; top: 0; height: 100%; width: 100%; background-size: cover; background-position: 50%; border-radius: 50%; background-color: green; }<div data-v-08ab2d5a=""><article data-v-08ab2d5a=""><div data-v-08ab2d5a=""><div data-v-08ab2d5a=""><strong data-v-08ab2d5a=""> A fertile environment for talent to grow </strong> <p data-v-08ab2d5a="">When asked, team members nearly always say the best thing about working at Xxxx Xxxxx is the people. Not only do they form strong relationships, but they appreciate each other’s talents and the opportunity to learn from one another. As Xxxxxxx (Training Specialist) says; <br></p></div></div><div data-v-08ab2d5a=""><div data-v-08ab2d5a=""><!----> <p data-v-08ab2d5a="">“It’s really inspiring to work with talented people.”</p></div></div><div data-v-08ab2d5a=""><div data-v-08ab2d5a=""><div data-v-08ab2d5a=""><div style="" data-v-08ab2d5a=""></div></div></div></div><div data-v-08ab2d5a=""><div data-v-08ab2d5a=""><!----> <p data-v-08ab2d5a="">A close second is the opportunity to learn and grow within the organisation. Xxxxx (Data and Insights Manager) commented that, “at Xxxx Xxxxx you keep growing...working here broadens your mind and you start to think differently.” This also seems to be one of the reasons that people choose to work for Xxxx Xxxxx with Xxxxx (Product Designer), one of our newest team members, saying he was attracted to the “very fertile environment in terms of learning and developing.”<br><br>One of the other reasons people choose to work at Xxxx Xxxxx is their experience through the recruitment process. Through my own process of joining the company, I got the sense that the people I came into contact with were very genuine and very real. Overall it seemed like people really care about the company, the people and the products they co-create.<br><br>My first impression seems to be an accurate reflection of how other team members feel, as they frequently mention how emotionally invested they are in their work, their team and the success of the business. There is a culture of care and a sense that everybody feels they are part of something bigger than themselves. Now that I have been in the team for a few months, I have a feeling people take their work seriously but they don’t take themselves too seriously. There isn’t anyone with a big ego and the culture is team-oriented.</p></div></div><div data-v-08ab2d5a=""><div data-v-08ab2d5a=""><!----> <p data-v-08ab2d5a="">“I have a feeling people take their work seriously but they don’t take themselves too seriously.”<br></p></div></div></article></div>CodePudding user response：
If you need to keep the container element block level, an alternative work-around is to turn on size containment for the element. e.g contain: size or contain: strict.
* {
box-sizing: border-box;
}
.small-container[data-v-08ab2d5a] {
max-width: 800px;
margin: 0 auto;
}
.article[data-v-08ab2d5a] {
-moz-column-count: 2;
column-count: 2;
grid-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
.article .text-row__column[data-v-08ab2d5a] {
padding: 10px 0;
flex: 0 0 50%;
order: 0!important;
font-family: Inter;
font-size: 16px;
font-weight: 400;
font-stretch: normal;
font-style: normal;
letter-spacing: -.16px;
text-align: left;
color: #1d1f27;
line-height: 24px;
}
[data-v-08ab2d5a] .style-success-story-quote {
font-family: Inter;
font-size: 22px;
font-weight: 700;
font-stretch: normal;
font-style: normal;
line-height: 1.14;
letter-spacing: -.63px;
color: #f4a331;
padding-top: 30px;
}
.summary-image-outer[data-v-08ab2d5a] {
padding: 0 50px;
margin-top: 0;
width: 100%;
}
.summary-image-wrapper[data-v-08ab2d5a] {
padding-top: 100%;
position: relative;
width: 100%;
background: red;
contain: size;
}
.summary-image-wrapper .summary-image[data-v-08ab2d5a] {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-size: cover;
background-position: 50%;
border-radius: 50%;
background-color: green;
}<div data-v-08ab2d5a="">
<article data-v-08ab2d5a="">
<div data-v-08ab2d5a="">
<div data-v-08ab2d5a=""><strong data-v-08ab2d5a="">
A fertile environment for talent to grow
</strong>
<p data-v-08ab2d5a="">When asked, team members nearly always say the best thing about working at Xxxx Xxxxx is the people. Not only do they form strong relationships, but they appreciate each other’s talents and the opportunity to learn from one another. As Xxxxxxx
(Training Specialist) says; <br></p>
</div>
</div>
<div data-v-08ab2d5a="">
<div data-v-08ab2d5a="">
<!---->
<p data-v-08ab2d5a="">“It’s really inspiring to work with talented people.”</p>
</div>
</div>
<div data-v-08ab2d5a="">
<div data-v-08ab2d5a="">
<div data-v-08ab2d5a="">
<div style="" data-v-08ab2d5a=""></div>
</div>
</div>
</div>
<div data-v-08ab2d5a="">
<div data-v-08ab2d5a="">
<!---->
<p data-v-08ab2d5a="">A close second is the opportunity to learn and grow within the organisation. Xxxxx (Data and Insights Manager) commented that, “at Xxxx Xxxxx you keep growing...working here broadens your mind and you start to think differently.” This also seems
to be one of the reasons that people choose to work for Xxxx Xxxxx with Xxxxx (Product Designer), one of our newest team members, saying he was attracted to the “very fertile environment in terms of learning and developing.”<br><br>One of the
other reasons people choose to work at Xxxx Xxxxx is their experience through the recruitment process. Through my own process of joining the company, I got the sense that the people I came into contact with were very genuine and very real. Overall
it seemed like people really care about the company, the people and the products they co-create.<br><br>My first impression seems to be an accurate reflection of how other team members feel, as they frequently mention how emotionally invested
they are in their work, their team and the success of the business. There is a culture of care and a sense that everybody feels they are part of something bigger than themselves. Now that I have been in the team for a few months, I have a feeling
people take their work seriously but they don’t take themselves too seriously. There isn’t anyone with a big ego and the culture is team-oriented.</p>
</div>
</div>
<div data-v-08ab2d5a="">
<div data-v-08ab2d5a="">
<!---->
<p data-v-08ab2d5a="">“I have a feeling people take their work seriously but they don’t take themselves too seriously.”<br></p>
</div>
</div>
</article>
</div>