I looked for a solution a couple of weeks back and was able to achieve the desired effect using 3 floating buttons + flexbox. It works as expected on my Android phone and in the browser.
However, when I checked it on my iPad, the width of those buttons is now 100% for all three (they stack on top of each other)
I don’t have an iPhone to test it, but it’s concerning that CSS is that far off 
Any ideas on where to even start digging? Not sure if there’s a way to “Inspect” a webpage on iPad.
Actually there IS the way to inspect a page from mobile Safari, but you need a mac)
Not sure if you speak russian, but there it is:
I do and I have a few macs, lol. Thank you, I’ll check it out!
The problem, actually, appears in both Chrome and Safari. So I feel like it might be more of an iPad problem than a browser. But can’t tell :-/
Developers have to use WebKit when making browser for ios, so all ios browsers are in fact — safari. Even Chrome.
Duh, that makes sense! 
Thank you, will dig into the video!
These width and height related things always present problems on different layouts for me. I struggle a lot to make it work both on iPad, desktop (full screen version) and mobile, so when I don’t have to make it fancy, I tend to avoid it.
If I have to, I will try to write different code snippets for each device. Can’t rely on just vw and vh, in my experience.
@Tamara_Didenko you can use this code to get the user’s device type. Not entirely reliable, but at least you have something to work with.
https://thinhdinhlca.github.io/get-user-device-type/
Then what I usually do is use this with an If Then Else column.
If Mobile then Mobile Code, if Tablet then Tablet Code etc.
In all three situations, I’m only looking at the mobile layout. I’m viewing the desktop version on my iPad pro, which still loads the version with all three buttons stretched across the bottom.
I’m not using vh or vw. I’m using flex-grow for the middle button and px for the two on the side. What would be a better measurement?
So, after inspecting the code through Safari in “mobile view”, what seems to be the problem is that iOS ignores the boundaries of the <button> parent and just stretches the “visible” part of the button (.floating-btn-style) across the whole screen.
Any ideas on how to force the visible part to behave?
I can definitely target it by class, but not sure what property to use.
There’s an additional problem that iOS seems to be loading those floating elements “on top of the page” instead of following the Glide’s component order… all kinds of fun stuff around that…
Yeah… That might be a big problem. Such a headache dealing with all different operation systems and devices…
Fixed the appearance of buttons by adding position: static to .floating-btn-style… Fixing the rest now
CSS works in mysterious ways…
I might be able to live without edits I’ve done by targeting “numbered” elements… But yeah, what a pain
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.
