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”
In the hero slider on main page (the glitch shows the image without the saturation filter, then jumps)
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.
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.
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.
Thanks @vincent & @PeterDimitrov!
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.
Ran
Great 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.
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).
Can I add something I noticed while browsing?
just a minute