Fixed element - problems when previewing in mobile web share.
I'm having issues with Fixing elements. Hopefully, you can help me understand what I'm doing wrong, or if its a current limitation of XD.
Fixing elements to the top of the page, like a top nav bar or title work perfectly fine.
However when it comes to fixing a bottom bar element, either naviagtion, or a call to action i'm having issues.
My example is prototyping for iPhone 8 (375 x 667pt)
A few problems:
- It's not ideal to have to place the element over the top of the design your working on, and not ideal for sharing with devs later.
- Not ideal to have to set a viewport height, rather than simply place at the bottom of the design like Invision or Figma or Sketch.
- When fixing the bottom bar elelemnt and previewing it on XD Preview app, it looks and works great.
- My biggest issue is When previewing the design in mobile web browser (and i've tried on a few different browsers) The bottom bar wont show. Now this is because the view port height isn't 667pt anymore, because we have browser top and bottom bars as well as the status bar. Keeping in mind that the browser bars minimize on scroll and also disappear on scroll, and reappear and maximize when you scroll back.
I've had to place the fixed element at a random point somewhere up the page (trial and error) to get it appearing in mobile web browser.
- Now, phones have different viewports, so when I want to share my prototype with users and stakeholders, i cannot be sure the prototype will behave as expected.
- Also as you scroll down the page eventually breaks and the element becomes unstuck from the bottom of the page.
Not ideal when you have people using iphone 5 iphone 8 iphone XS Plus, all different heights...
AdminMuthukumar S (Admin, Adobe) commented
To investigate, can you please share the published prototype link and the sample XD file here in this thread?