▼
Streaming live at 10am (PST)

HELP. Fixed pop-up box not displaying in Chrome

Design help General
#1

Any help will be very appreciated.

I’ve set up a pop-up contact form. Flex box, fixed position, initially display: none.
Safari correctly displays the pop-up after animation:

Screen Shot 2020-10-11 at 11.49.53 AM
Screen Shot 2020-10-11 at 11.49.53 AM2842×3030 543 KB

Chrome displays nothing.
Here’s the inspector from Chrome.

Screen Shot 2020-10-11 at 11.48.28 AM
Screen Shot 2020-10-11 at 11.48.28 AM2614×1338 467 KB

It’s reading everything correctly. The pop-up was initially hiding at the bottom of the viewport with translate3d(0px, 100vh, 0px). The call to open the pop-up changed that to translate3d(0px, 0vh, 0px) along with display: flex.

I’m so lost.

Ok. A little update.
It’s not that the pop-up isn’t showing up, but it’s positioned to the entire body. It’s a long body, so I didn’t catch it right away. So, right now, it’s just stuck to the middle of the body.
Why does a fixed-position item behave like an absolute-positioned item relative to the body??

#2

That took too long, but I found the fix.
Somehow somewhere along the way, I had specified “children’s perspective” on the Body in one of the bigger media breaks. And, Chrome apparently was honoring that.
Once I deleted that, it was back to normal.