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

Issue with Timeline 8 Component z-index on iPhone Devices

Hi 🙋, I’m currently trying to implement the Timeline 8 Component and am experiencing an issue with the "timeline8_progress-line." It appears to not respect the z-index or just flashes through the "timeline8_progress-line-cover," which should cover it but doesn't (sometimes). This issue seems to occur only on iPhone (both Chrome and Safari on Iphone 15 pro). I’ve attached a screen recording for better understanding. Here is my read-only link (Fresh Project and Component): https://preview.webflow.com/preview/e-commerce-24a937?utm_medium=preview_link&utm_sour[…]7&preview=2f30562c559e7f7ca9bc8cc9cc9d278f&workflow=preview. I would appreciate any help or hints you can provide. Thank you!

18 comments

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
Jonas G.
·
Maria M. FYI I had the same problem with "timeline 1" & "timeline 2" on arc (mobile, iOS).
Kaleb J.
·
Thank you for flagging Jonas G.!
Maria M.
·
Thanks Jonas G.! We’ll check all our timeline components to identify this issue and update them ASAP 🙂
👍1