fixed element inside positon: relative element gets cut off in multi-column layout

Issue #8248678 • Assigned to Bogdan B.

Details

Created
Jul 22, 2016
Privacy
This issue is public.
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

  1. Go to https://jsfiddle.net/2v5npjq3/1

As you can see in the demo, there is a 3 column layout with a number of fixed-size elements inside it. One of the elements has position: relative set on it, with a position: fixed element inside. The position: fixed element gets cut off at the edge of the column that its parent element is in. It’s not even cut off at the edge of its parent, as you can see in the demo, but at the edge of the column. And the element itself does extend the correct width across all the columns, it’s just that the full width is not displayed. If position: relative is removed from its parent, it displays fine.

Attached are screenshots from the website where I first discovered the problem. The problem can be reproduced there by:

  1. Navigate to http://retrieverstories.umbc.edu
  2. Ensure you are on the “Featured” tab, then click on one of the boxes there.
  3. This will take you to a collection page with a number of elements on it.
  4. Click on one of the share buttons, and click on the button that looks like “< >”
  5. You will now see the share dialog open up, but be cut off at the edge of the column.

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Bogdan B.”

    Changed Assigned To to “Rick J.”

    Changed Assigned To from “Rick J.” to “Bogdan B.”

You need to sign in to your Microsoft account to add a comment.

Sign in