Iphone / Safari - Html element Blinking & Disappear with fullscreen slider (magnetic slide) add-on

[dafv]

Hey @arminunruh and @Richard, I think i'm having the same issue.

I made a page with the Fullscreen Slider activated, with each row having a text element. After some scroll, the texts starts to disappear and/or flashing. This only happens in Safari (macOS). Also tested in IOS and the same thing happens.

When i activate the Scroll Element Transitions the page reacts different, with some of the texts transitioning and others don't. And only the first row text disappears (after some scroll).

I already tried to turn off all custom CSS, turning off the scroll transitions, etc. Nothing works. Can you please fix this?

For what i can see, this issue traces back to 2021 at least. There's also another post...not sure if it's related to this: http://laythemeforum.com:4567/topic/7606/fullscreen-slider-images-flash-in-safari

Here's the page, if you want to check it:
https://www.daniel-martins.com/homepage/

[arminunruh]

i think its because of the looping, can you try to turn this off and see if it works?

[arminunruh]

in lay options -> fullscreen slider addon

[dafv]

hey @arminunruh

I already tried that before, but the issue persisted.
I left it off now, so you can see.

[arminunruh]

so what i see is not blinking but its the disappearing of the text

i see i see

can you put this css into lay options → custom css

.type-text{
transform: translate3d(0,0,0);
}

does that fix it?

[dafv]

it worked @arminunruh!
At least the text is not disappearing anymore.

However, when i activate the Scroll Element Transitions, the transition only happens one time (the first time the row appears on screen) — when you scroll again to the same row, the text transition doesn't happen again as it should (in Safari and Orion browser).

Do you have any idea what's causing this?

[arminunruh]

yes it is because we use the aforementioned css!

try this css instead:

.type-text.in-view{
transform: translate3d(0,0,0);
}

[dafv]

hey @arminunruh

With this CSS (instead of the previous) the texts start to disappear again :/
I already tried an '!important' but it does nothing...

[arminunruh]

well the setting:

needs to be enabled if you want to use that css

[arminunruh]

the website u did is really nice!!

[dafv]

Thank you @arminunruh!

Regarding the CSS, I tried activating the on Scroll Element Transitions but it was buggy, with the text on the first row disappearing and the transitions only happening the first time. I left it on for you to see.

Between those CSS options i would prefer using the first one, but it's still not ideal :/

[arminunruh]

so to be clear:
what you want is:

1. the texts to slide in from the bottom as when "activate on scroll element transition" is enabled.
2. texts should obviously not blink or disappear
3. texts should do that animation not just once but when you scroll up again and scroll down again, that animation should show again

is that it?

[arminunruh]

will work on this rn mmh

[arminunruh]

can you remove your custom css, then update the fullscreen slider addon?
then see if it works!

if not:
can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

[dafv]

Hey @arminunruh,
Unfortunately that didn't fix the issue :/

I'll send you an email with that information right now!
Thank you

[arminunruh]

will try and look into it tomorrow