Why does Google Chrome ignore “top” css property in a relatively-positioned element inside a flex-box?
Question
Google Chrome, somewhere between version 80 and 84 seems to have made breaking changes to its layout engine, causing the HTML below to be rendered differently than before. It is also different than Firefox (v78) or Edge (v18).
<head>
<style>
body { font-family: sans-serif; }
.inner { border: 1px solid black; }
.outer { display: flex; }
span { position: relative; top: 50%; }
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<span>Text</span>
</div>
</div>
</body>
Google Chrome v84 renders this as:
Firefox, Edge, and Google Chrome <= v80 render it like this:
Although the latter rendering appears "uglier", it is actually what I expect the result to be (based on Firefox, Edge, and Chrome's previous behavior). That is, I expect the text to be shifted down by 50%, relative to its containing div , due to the top: 50% css property. But Chrome's rendering doesn't seem to change whether top is specified or not.
However, I want to point out that when viewing Chrome's and Firefox's DevTools, the values for all layout attributes appear to be the same, including top (which is shown as 9px in both). So although Chrome seems to be interpreting the layout the same way nominally, the rendering is different.
This change in rendering (and difference between browsers) has caused a number of problems in the layout of a website that uses top: 50% in combination with transform: translateY(-50%) in order to center a block vertically within another block-positioned element -- a "classic" recipe, as described by W3schools , LogRocket and others, eg here . One difference between the classic recipe and what I have above is that the span is positioned relative instead of absolute. This allows the height and width of the div.inner to be based on the preferred size of the span . This was all working very nicely before the recent Chrome update.
If anyone can explain the difference in rendering or discuss the recent layout changes in Chrome and/or a workaround to achieve a consistent layout in Firefox, Chrome, and Edge, I would really appreciate it.
2 answers
solution1
1 ACCPTED 2020-07-23 00:01:36
This is a bug on Chrome 84 that is being fixed at the moment.
solution2
0 2020-07-22 16:58:43
this is quite a common problem I've always wished someone work on... but from what I've learnt so far, I feel the only way out to this kind of problem is to research on browsers extension, like "webkit", "moz", "o" and "ms", developers will start specifying for web browser like the specifications for screen sizes now.. note(webkit is for chrome and apple safari, I'll like to receive a response from you. Good luck
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.