Does parent element overflow:hidden cause child element scrolling to fail? Why is Safari browser like this?

Overflow of parent element: Study on the failure of hidden and child element scrolling

This article will explore a CSS layout problem: after the parent element is set overflow: hidden, the child element cannot scroll even if it is set overflow: scroll, but it can scroll after adding position: absolute. This problem is particularly obvious on Safari browser.

The problem description points out that after setting the position attribute of the child element to absolute, the child element can be scrolled. However, the questioner has ruled out the possibility of absolute generating BFC and disconnecting from document flow, because float and fixed are also invalid. This has triggered in-depth thinking on the CSS layout mechanism.

A key observation is that this problem is outstanding in Safari browsers, while it does not have this problem in Edge and Firefox browsers. This suggests that the problem may be related to the implementation differences of different browsers for CSS rendering engines.

The answer to the question states that in Edge and Firefox browsers, this question does not appear. This shows that this problem is not a common problem in the CSS specification, but is caused by the rendering engine characteristics of a specific browser (Safari). Therefore, to gain a deeper understanding of this issue, we need to study the specific implementation mechanism of Safari browser for overflow: hidden and position properties, as well as the differences in the way different rendering engines handle such CSS conflicts. This requires in-depth research on the source code or related documents of the browser rendering engine to find the root cause. At present, it can only be speculated that this may be a bug in the Safari browser or a special way of handling the rendering engine.

The above is the detailed content of Does parent element overflow:hidden cause child element scrolling to fail? Why is Safari browser like this?. For more information, please follow other related articles on the PHP Chinese website!