CSS - Safari - fixed positioned element is not relative to it's relative container

Question

I'm trying to place fixed element and keep it relative to its container, not the port view.

I made it in chrome.

On Safari however, the fixed element is placed at the bottom of the page, disregarding its parent position and place. For some reason it gets the right place when clicking the container.

I tried to add translate property to the fixed element, it didn't help.

I tried to create the fixed behaviour with absolute position instead of fix, but couldn't make it to work. It moved with the scroll.

Container CSS

.Container {
  display: flex;
  flex-direction: column;
  position: relative;
}

Fixed Element CSS

.Fixed {
  font-weight: 300 !important;
  width: fit-content;
  font-size: 14px !important;
  position: fixed;
  background: value(CalendarBackground);
  bottom: 0;
  left: 3px;
  width: 100%;
  padding-left: 32px;
  border-radius: 3px;
  height: 68px;
}

EDIT 1 - React Component JSX (HTML TO BE)

 <div className={classes.ExpandedEvent}>

         // CONTAINER
          <div className={classes.Container}>
            <div className={classes.TimeContainer}>
              <Text className={classes.Time}>{time}</Text>
              {recurrenceJsx}
            </div>
            {locationJsx}
            {summaryJsx}
            {attachmentsJsx}
          </div>
             
          // FIXED
          <TextButton onClick={_onCopyClick} className={classes.Fixed}>{t('Google_Calendar_Copy')}</TextButton>
        </div>

EDIT 2 - LIVE EXAMPLE

https://itaytur.github.io/wix-calendar/?path=/story/calendar--desktop-agenda

I deployed the component so it could be seen live. not all the css was loaded sorry in advance, but for reproduce the bug it works.

click the first event from the top, called: CLICK TO SEE FIXED 'COPY TO CALENDAR' BTN IN THE POPUP BOTTOM - NOT SHOWING ON SAFARI.

in chrome the copy button is shown and sticks to the bottom of the popup even when scrolling, in safari it doesn't shown at all.

You should really take time to create a working code snippets, without JSX markup to demonstrate your issue. — ZecKa, Jan 25 '21 at 11:30

score 2 · Accepted Answer · answered Jan 25 '21 at 11:21

2

Because fixed item doesn't care about relative container

You can use absolute position inside a fixed element

But there is already a lot of post about it: Juste take a look here:

You can also take a look to sticky property: https://www.w3schools.com/howto/howto_css_sticky_element.asp

.wrapper{
  width: 100%;
  padding: 40px;
  background: yellow;
}
.relative-item{
  width: 200px;
  height:100vh;
  background: green;
}
.fixed-item-wrap{
  position: fixed;
  width: 200px;
  height:100vh;
}
.fixed-item{
  background: red;
  color: white;
  position: absolute;
  top: 20px;
}

<div class="wrapper">
  <div class="relative-item">
    <div class="fixed-item-wrap">
      <div class="fixed-item">
        I'm fixed but relative !
      </div>
    </div>
  </div>  
</div>

answered Jan 25 '21 at 11:21

ZecKa

2,552
2
21
39

still doesn't work on safari for me. again, current situation works on chrome – Itay Tur Jan 25 '21 at 11:32
Work well in my side, which version of safari? – ZecKa Jan 25 '21 at 11:34
the sticky is shown, but if the container is really big and scrollable, the text is at the bottom. so the user need to scroll to the bottom to see it. – Itay Tur Jan 25 '21 at 11:37
1

You definitely need to create a code snippet to show us your problem, because I don't understand what you're trying to do. I'm sorry... – ZecKa Jan 25 '21 at 11:42
I tried the sticky again and it worked, thank you ! – Itay Tur Jan 25 '21 at 14:39

score 0 · Answer 2 · answered Jan 25 '21 at 11:10

Here's an example of what I think it is that you're trying to achieve.

If you want the child position to be relative to it's initial position, you should set it's position as relative.

.Container {
  background: red;
  padding: 50px;
} 

.Relative {
  background: white;
  font-weight: 300 !important;
  font-size: 14px !important;
  position: relative;
  bottom: 20px;
  border: 1px solid black;
  left: 55px;
  padding-left: 32px;
  border-radius: 3px;
  height: 68px;
}

<div class="Container">
  <div class="Relative">
    My position is relative to my initial position
  </div>
</div>

hey, this is not good for this case. i need the child to be fixed, so when i scroll the parent it will stick to its place — Itay Tur, Jan 25 '21 at 11:16

CSS - Safari - fixed positioned element is not relative to it's relative container

2 Answers2