Streaming live at 10am (PST)

Weird Mobile Glitches (Saturation Effect + Interactions)

#1

Hey Guys! @PixelGeek
I have a weird problem on the mobile version of a website I’m working on.
Note - this problem is visible only on the actual device (iPhone in my case, both Chrome & Safari).
Attaching an image below.

There are actually 2 “glitches”

  1. In the hero slider on main page (the glitch shows the image without the saturation filter, then jumps)
  2. in the profiles of the woman down on the home page, sometimes you get weird croppings / saturations.

There are multiple elements at play here (saturation effect, multiply overlay with css code & interactions) and I have no idea what’s causing the problem.

Link to test on your mobile devices - http://doubleyou.webflow.io

Here is my site Read-Only: https://preview.webflow.com/preview/doubleyou?utm_source=doubleyou&preview=765ccee6097fa3cc16ebfdccc4dd35b8

THANKS!
Ran

1 Like
#2

Hi Ran, I was unable to reproduce your bug on iOS, neither with Safari nor Chrome. I tried ti reproduce each bug but couldn’t. Everything is up to date, iPhone XR.

#3

I can’t see the problems you are describing. Using Safari up to date. The only thing I’m seeing is when I tap over a profile image and then tap on another profile image the black box with the profile info is not hiding smoothly.

#4

Thanks @vincent & @PiterDimitrov!
Seems like I was able to solve the issue myself, I had a problem in one of my interactions where I forgot to hide the div with the multiply and I guess that messes things up.
Really appreciate your prompt response! You guys rock.
:black_heart:
Ran

1 Like
#5

Happy to hear!

#6

Great :slight_smile: Can I add something I noticed while browsing?

On your home, mobile, you’re using vh (I think) for the height of the hero section.

On Chrome mobile, this causes the section to resize — and jump a little on the way — each time you change your scroll direction.

This is because Chrome mobile considers that the viewport is exactly what you see, and as it has an appearing / disappearing bottom toolbar, well the viewport height constantly resizes.

On Safari mobile, there’s the same behavior, except the bottom bar doesn’t account for viewport height calculation.

I don’t know what’s the good solution to avoid jumps here. I can only say I dislike both Safari and Chrome strategy. Safari strategy prevents us to do real full screen sections, and Chrome’s induces jumps.

#7

I think on mobile is better to avoid using VH, but still subjective :blush:

#8

I see what you mean.

However mobile, imho, is made for full screen cards-like UIs. It’s so effective. I use fullpage.js a lot on mobile, it just make sense, gives an app-like feeling and forces you to fit your content into easy to read boxes: good for narrative and UX.

Now, I don’t know how to address Safari’s issue. It’s unfixable, I tried, like others, every combinations of CSS + head code to make the page behave like an app (which is limited, only really kinda works when URLs are launched from a bookmark on phone home).

And Chrome having a different behavior is not only increasing the problem, but their choice defies logic.

In the end, it’s not possible to offer a nice, non-jaggy full screen experience to everyone on mobile, using HTML and CSS only. (and even with JS it’s not even that on Chrome).

1 Like
#9

@vincent @PiterDimitrov guys! the glitches are back! and I have no clue why :scream:
Can you take a look on your mobile devices?
Appreciate your help :pray:

1 Like
#10

Yes :raised_hands: just a minute

@Ran_Segall I’m seeing a 404 for the subdomain

closed #11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.