I’m making a custom component inside my Ionic 3.6.0 app. It has a central button, positioned with CSS position: absolute;. It’s parent div is positioned as relative.
It’s working flawlessly on the browser, showing the element right where I want it, but it doesn’t even show the element on “native” iOS.
Am I missing something?
Use the Safari debugging tool to see where it’s ending up and why (or how best to work around it)
I’ve been trying to figure this out almost all day… could it be possible that this is an Ionic bug / limitation of some type?
I doubt it, it’s just a browser and css. Could be a quirk in browser rendering but you can probably force it with some ios specific css. Did you use the safari debugger?
Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios
Thanks guys. Yes, I’ve been able to remote debug it using Safari dev tools and both my iPhone and a iOS simulator… It’s like the element completely disappears off the screen unless it has relative positioning. It’s in the DOM, but I can’t even see where it is on the screen.
I’ve tried some other HTML+CSS code that works fine on browsers, and some absolute positioned elements work on iOS, some don’t. I don’t see the pattern of the problem yet, but I’ll keep you posted.
