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

What is the best way to define a margin according to the size of the device being used

Utilizing partials in EJS for efficient HTML tag insertion

Switch classes while navigating within a div

Design an interactive quarter-circle using CSS styling

How do you vertically span a grid element across 3 rows using Material UI?

Does the class "col-sm-4" in bootstrap automatically become "col-sm-4 col-md-4 col-lg-4" if col-md and col-lg are not defined?

Using the CSS property `absolute` can result in the input element shifting when entering text in Chrome

Troubleshooting Problems with display:table and display:table-cell Alignment in Internet Explorer Versions 7 and 9

Retrieving information from CRM online utilizing the Web API

What is the method for adjusting the border color of an ng-select component to red?

What strategies should be employed to manage data-driven input in this particular scenario?

Is there a way to dynamically refresh the options in a select dropdown using jQuery?

I am looking for guidance on the proper way to import MatDrawer and MatDrawerContainer in the app.module.ts file for an Angular

Is there a way to create a table with "cells that can be controlled individually" similar to the image provided using HTML and CSS?

Is It Better to Consider Angular Elements as Building Blocks or Encapsulated Components?

Endless cycle of invoking functions in Angular.js

What is the best way to eliminate the pause in my slideshow?

Bootstrap's Vertical Margin Concept

Achieve a responsive layout by dynamically sizing child div elements to fill their parent container using percentage-based margins and

The form action now triggers the download of the PHP file instead of simply loading