Skip to main content
P
perrybrus
Inspiring
June 24, 2020
Answered

Fixed position element not working in presentation mode

  • June 24, 2020
  • 11 replies
  • 1631 views

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. 

This topic has been closed for replies.
Correct answer Spas K.

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.


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.

 

11 replies

Spas K.
Community Expert
Spas K.Community Expert
Community Expert
July 2, 2020

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.

    P
    perrybrusAuthor
    Inspiring
    July 3, 2020

    "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.

    Spas K.
    Community Expert
    Spas K.Community Expert
    Community Expert
    July 3, 2020

    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 🙂

     

     

     

    0
    Rishabh_Tiwari
    Rishabh_Tiwari
    Legend
    June 24, 2020

    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

    P
    perrybrusAuthor
    Inspiring
    June 24, 2020

    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

     

    Rishabh_Tiwari
    Rishabh_Tiwari
    Legend
    July 1, 2020

    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%.

    0
    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

    Explore now
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices