Issue with Timeline 8 Component on iPhone

can I get the published URL so I can see the issue first hand?

DM will work too

Hi ,

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.

okay - there is a the DVH (Dynamic Viewport Height) - maybe if we try that?

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

Hi ,

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`.

cc might need your eyes on this one - looks a bit gnarly!

Checking now Matt 👍

Nice catch This looks to be a Safari issue at first glance. Chrome on iPhone apparently is using Safari essentially. Same same.

Have you tried making timline8_circle relative and adding a higher z-index by any chacne?

Hey 👋 , 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.

Sweet, would love to know how you go !

Hey guys , ,

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.

Hey ! 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

, thank you so much for looking into this. The fix works perfectly! I really appreciate your help on this. 🙏

FYI I had the same problem with "timeline 1" & "timeline 2" on arc (mobile, iOS).