Fixed position element not working in presentation mode

Advocate ,
Jun 24, 2020 Jun 24, 2020

Copy link to clipboard

Copied

When I share for presentation my top menu with fixed position snaps out of its fixed position and scroll along with the page the second I reach bottom of page and start to scroll back up on views higher than 85.4%. The default zoom is set to 85.4% when I enter the prototype link. This doesnt happen when I view the prototype within XD, only on the shared for presentation files. This happens on all my pages. Cant share this due to corporate rules. Looks like a bug. 

TOPICS
Prototyping

Views

220

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Jul 03, 2020 Jul 03, 2020
Yes, I agree the preview environment isn't well thought out as well. It's one of many UX problems this platform has, sadly. All we can do is figure workarounds or other solutions, as suggestions clearly get ignored.

Likes

Translate

Translate
Adobe Community Professional ,
Jun 24, 2020 Jun 24, 2020

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 24, 2020 Jun 24, 2020

Copy link to clipboard

Copied

Hi there,

 

Sorry to hear about the trouble. I tested this on my end and it seems to be working fine. Since you are unable to share the actual file, could you please test this on a new sample file and see if it's happening with other files as well? If yes, please share that other sample file if possible along with the version of XD and the Operating System version, we'll try our best to help you with this.

 

Regards

Rishabh

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jun 24, 2020 Jun 24, 2020

Copy link to clipboard

Copied

Yes, same outcome on all files. I've made a new file as you requested and it happens there as well. Same default 85.4% zoom level and if increased then the sticky top menu section looses fixed position and scrolls out of the picture when scrolling back up.

 

https://xd.adobe.com/view/00f24add-a5e0-4591-8f54-a0c8fd874058-55a1/

 

XD 30.1.12.4

Winver 19.09

OS build 18363.900

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jul 01, 2020 Jul 01, 2020

Copy link to clipboard

Copied

Sorry for the delay in response. Please update XD to the latest version that is 30.2.12.3 and check if it still happens. I'll also recommend loading the prototype in the default zoom%, it seems to work fine at default zoom%.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 01, 2020 Jul 01, 2020

Copy link to clipboard

Copied

No change on latest update that I received in CC today. Not sure what you mean by switching to default zoom? As mentioned default zoom is 85.4% and as mentioned that's the only time anything works. But on all other zoom levels sticky elements  comes apart as mentioned. Is it not supposed to work on any other zoom? One would think 100% should be the default zoom.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jul 02, 2020 Jul 02, 2020

Copy link to clipboard

Copied

So sorry for the confusion Could you confirm if you are using two or more display screens? Also, please navigate to the display settings and let us know the Scale and Layout zoom%. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 02, 2020 Jul 02, 2020

Copy link to clipboard

Copied

Here's what's happening. Your prototype at 100% is bigger than your browser window.

 

When you open the prototype, it automatically fits your browser window space, so it's at 85%. When you force it to go 100%, your browser clips the top and bottom of the preview. Think of it as how an embedded pdf document on a page behaves, it's a scroll within another scroll.

 

So when you scroll, at one point you are scrolling the browser window up and down, and your top menu gets clipped. When you reach the bottom, it then scrolls within the prototype preview window and your prototype page scrolls.

 

This is why I always account for task bars and browser interface when setting the viewport size.
Here's an example: I make a prototype for a laptop screen - for example an average laptop - 1366x768.
Because I know the user's browser and taskbar will take around 120 pixels, I set the viewport to 650 instead of 768, so when they view at 100% they won't get any clipping and it looks realistic. 

Otherwise, if you don't amount for that the user needs to view the prototype at full screen and with the browser interface hidden.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 03, 2020 Jul 03, 2020

Copy link to clipboard

Copied

"Your prototype at 100% is bigger than your browser window." But it's not bigger than my browser window. The resolution at my end is 2560x1440 and the viewport in CC is considerably clipped in height. When I increase the zoom level in the CC viewer (not in browser) the content is shown a little bit bigger inside the clipped viewport but its not bigger than my resolution or browser viewport. Why does Adobe clip the viewport at the bottom anyways? No need for that.  I also account for task bars and browser interface when setting the viewport size, I even include the 15px wide scrollbare face, but I don't think thats relevant here as the viewport within the CC frame is cut. It's like looking at something inside an inline frame with a set overflow. I don't understand why things are displayed that way in CC, cause thats not an autentic preview. Example: If I made this thing in Dreamweaver and did a preview it wouldn't present my design inside a clipped or restricted frame like it does on the cloud presentation, it would just show me what I made in a 1:1 relation.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 03, 2020 Jul 03, 2020

Copy link to clipboard

Copied

Don't compare Dreamweaver to Xd, as they work in a completely different way.

Xd prototypes essentially render PNG's with some layering between them, but the prototype is mostly static.

It's not actual html markup that the browser can understand as such and scale dynamically. It's more like an image, and it's not even vector.

 

I don't know what's happening on your monitor, but in the link you shared, that prototype is a bit taller than the available space (viewing it on 1920x1080), taking into account the browser interface and the prototype navigation if you don't switch to fullscreen. In fullscreen mode it's fine and everything looks / works okay.

 

Maybe you have some scaling on your monitor, or maybe you zoomed in in the browser so everything's bigger. Try Ctrl+0 and see if anything changes. A prototype in 100% will display at its original resolution. If it gets clipped, it's bigger than the space available, that's it. 

 

Here's a video where I made the preview border thicker, so you can see what's happening. Maybe you can also record a video or take screens, so we can get to the bottom of it 🙂

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 03, 2020 Jul 03, 2020

Copy link to clipboard

Copied

No my browser is not at anything else than 100% and there's no monitor scaling going. I'm using just one monitor connected one stationary PC. No laptop with secondary monitor or anything. I think I'm just going to use InVison to demo my design cause there's no issue with a fixed top or anything simmilar there. To me the CC approach is not as suited for this purpose as it "incapsulates" the design inside a contrained container, that's why I made the comparson to inline frame with a restricted viewport.

 

Thanks for following up dstoic. Much appriaicated. I see that my username is all of a sudden different. I'm logged in with the same credentials as always - beats me.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 03, 2020 Jul 03, 2020

Copy link to clipboard

Copied

LATEST

Yes, I agree the preview environment isn't well thought out as well. It's one of many UX problems this platform has, sadly. All we can do is figure workarounds or other solutions, as suggestions clearly get ignored.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines