Issue with Timeline 8 Component z-index on iPhone Devices | Relume Community

Relume Community Icon

Issue with Timeline 8 Component z-index on iPhone Devices | Relume Community

Matt J.
·
Sam B. can I get the published URL so I can see the issue first hand?
🙌1
Matt J.
·
DM will work too
Sam B.
·
Hi Matt J., Here is the published link: https://e-commerce-24a937.webflow.io/home-copy. It seems the issue might be related to the iPhone's bottom browser navigation bars disappearing when you scroll, which changes the viewport.
Matt J.
·
Sam B. okay - there is a the DVH (Dynamic Viewport Height) - maybe if we try that?
Matt J.
·
Sam B. it looks like the height is using this unit but the negative margin isn't so try changing that and doing a test and let me know
Sam B.
·
Hi Matt J., Thanks! 🙏 I already tried using `dvh`, but unfortunately, it yielded the same result. This issue occurs on the "native" component from the Relume library website as well, affecting all timeline components that use the div cover approach with `vh`.
Matt J.
·
cc Kaleb J. Maria M. might need your eyes on this one - looks a bit gnarly!
👍1
Kaleb J.
·
Checking now Matt 👍🏼
Kaleb J.
·
Nice catch Sam B. This looks to be a Safari issue at first glance. Chrome on iPhone apparently is using Safari essentially. Same same.
👍1
Kaleb J.
·
Have you tried making timline8_circle relative and adding a higher z-index by any chacne?
Sam B.
·
Hey Kaleb J. 👋 , I don't think I've tried exactly that, but I have adjusted with z-index. I'll give it a try tomorrow morning. 🙏 Thanks, guys.
🙌🏻1
Kaleb J.
·
Sweet, would love to know how you go Sam B.!
🙌1
Sam B.
·
Hey guys Kaleb J., Matt J., Unfortunately, adjusting the z-index and setting the circle to relative didn't make any difference. I think I've tried almost everything. 😂 Is Relume possibly telling the browser not to change the viewport? Using this link, the Tab bar stays and no weird behavior appears: https://www.relume.io/preview?cid=timelines/section_timeline8. My problem now is finding a solution for my clients because I'm using the timeline components in live builds.
Maria M.
·
Hey Sam B.! It looks like there is an issue with how Safari on iOS handles z-index.
Add an embed code inside the component with the following code:
<style> .timeline8_content-right, .timeline8_progress-line-cover { -webkit-transform: translate3d(0, 0, 0); } </style>
Set the embed code to display: none
Set .timeline8_content-right to position: relative with a z-index of 2
Let me know if this works! 🙂
Sam B.
·
Maria M., thank you so much for looking into this. The fix works perfectly! I really appreciate your help on this. 🙏
❤️1
🎉1