What method does Apple use to apply overflow:hidden to elements within position:fixed?

Question

What method does Apple use to apply overflow:hidden to elements within position:fixed?

After conducting my own experiments and delving into the topic online, I discovered that elements using position: fixed do not adhere to the overflow: hidden property of their parent element. This also applies to children within the fixed positioned element as they too ignore the ancestor's overflow: hidden property.

Surprisingly, Apple seems to have found a way around this on Apple Music.

Container with overflow: hidden

https://i.stack.imgur.com/VKfZU.png

Inner element with position: fixed

https://i.stack.imgur.com/ZU18Y.png

The device itself

https://i.stack.imgur.com/W5uhX.png

In the second image where there is a blue highlighted area, you can see that the fixed positioned element overflows its container along with the phone inside it (as shown in the third image). Despite this overflow, the contents of the fixed positioned element (the phone) are still truncated by the ancestor with an overflow: hidden property. If I remove the overflow: hidden property from the ancestor using Chrome's dev tools, the entire phone becomes fully visible.

How has Apple achieved this? I have attempted to recreate it using the same combination of fixed, relative, overflow properties, among other settings but without success, indicating that something crucial eludes me.

UPDATE

As elucidated by @user3790069 in his response, a fixed positioned element may be clipped by a relatively positioned one if the latter boasts a higher z-index, or it is simply located after the fixed positioned element (thus automatically assigned a greater z-index). Nonetheless, in the case of the Apple Music example, it appears that the overflow: hidden property continues to play a pivotal role for them. To confirm this, I eliminated several DOM elements to minimize clutter. The following screenshots showcase:

a) a wrapping section element incorporating overflow: hidden b) nested within it, a position: fixed element.

In the initial screenshot, note how the phone is cropped. Contrastingly, in the subsequent screenshot I withdrew the overflow: hidden property, thereby unveiling the overflowing segment of the phone.

https://i.stack.imgur.com/NU8Gc.png https://i.stack.imgur.com/K2plb.png

html css overflow css-position

Answer 1

Answer №1

Initially, let me clarify why fixed children are not affected by the CSS property overflow: hidden of their parent element. A child box B is only clipped by the overflow property applied to its ancestor A if A serves as the containing block for B. However, in the case of a fixed element, the containing block is not simply an ancestor; it encompasses the entire viewport.
It seems that the fixed elements on the mentioned page are not actually cut off by the overflow property; instead, they seem to be concealed beneath other positioned elements.

Here is an example:

<div id=cont>
  <div style="background: red">
    <div class=fixed></div>
  </div>
  <div style="background: yellow">
    <div class=fixed id=second></div>
  </div>
    <div style="background: green"></div>
</div>

#cont {
  height: 5000px
}

#cont > div {
  height: 200px;
  position: relative
}

.fixed {
  width: 100px;
  height: 100px;
  background: black;
  position: fixed;
  right: 20px;
  top: 20px
}

#second {
  top: 240px
}

Answer 2

Initially, let me clarify why fixed children are not affected by the CSS property overflow: hidden of their parent element. A child box B is only clipped by the overflow property applied to its ancestor A if A serves as the containing block for B. However, in the case of a fixed element, the containing block is not simply an ancestor; it encompasses the entire viewport.
It seems that the fixed elements on the mentioned page are not actually cut off by the overflow property; instead, they seem to be concealed beneath other positioned elements.

Here is an example:

<div id=cont>
  <div style="background: red">
    <div class=fixed></div>
  </div>
  <div style="background: yellow">
    <div class=fixed id=second></div>
  </div>
    <div style="background: green"></div>
</div>

#cont {
  height: 5000px
}

#cont > div {
  height: 200px;
  position: relative
}

.fixed {
  width: 100px;
  height: 100px;
  background: black;
  position: fixed;
  right: 20px;
  top: 20px
}

#second {
  top: 240px
}

What method does Apple use to apply overflow:hidden to elements within position:fixed?

UPDATE

Answer №1

Similar questions

Displaying or concealing HTML elements using AngularJS while a modal is open

Updating the content within a div following the submission of a contact form 7

Is there a way to customize the color of a MUI styled component?

Is it feasible to transition a mobile webpage seamlessly without using jqm?

Difficulty in arranging DIVs on a flat surface

Issue encountered when concealing page elements followed by revealing them again

Differentiate between minimum and maximum values on ion-range sliders with discrete color options

What is the best way to duplicate several HTML input fields using jQuery?

Chrome has some issues with resizing the SVG Pattern element

Steps for creating a resizable and automatically hiding side menu

Prevent user scrolling when full-screen menu is activated

Chrome stack router outlet and the utilization of the Angular back button

Tips for choosing a particular list item using jQuery: retrieve the attribute value of 'value' and showcase it on the webpage

Creating React components with scoped CSS imports

What is the best way to ensure uniformity in my boxes (addressing issues with whitespace and box-sizing using flexbox)?

How to automatically select the first item in a populated dropdown list using Vue JS

Integrating a fresh element into the carousel structure will automatically generate a new row within Angular

Angular - Display shows previous and current data values

Is there a way to refresh a webpage without the need to reload it

Arranging various s:select dropdowns for inline display styling