Nextcloud-vue: AppContent: no "fixed" element possible

[korelstar]

I want to add a button to the AppContent which should be at a fixed position. Therefore, I'm using the CSS style position: fixed on that button. However, the element isn't shown fixed in the app. Instead it scrolls with the content, i.e. it behaves like position: absolute.

I tried to debug this issue and found out that the following line causes this behavior:

https://github.com/nextcloud/nextcloud-vue/blob/e2ea6704327bd3de9d78bb5ff52f7441e37fbd5d/src/components/AppContent/AppContent.vue#L90

If I remove this or deactivate this (e.g. with #app-content { will-change: auto !important; }), the behavior of my fixed element is as expected.

I've tested with Firefox 60.6.1esr and Chromium 73.0.3683.75 (Debian stable). Strange, hmm?

The easiest solution would be to remove that will-change, since it's just an optimization aspect. But maybe there is another solution to fix this?

[skjnldsv]

@korelstar did you set the top value of the fixed element?
This is a css requirement for it to work :)

[korelstar]

I'm using bottom instead, since it should be at the bottom of the window. Please see https://github.com/nextcloud/notes/blob/vue/src/Note.vue for details.

Here are the most relevant parts:

        <AppContent>
                <div>
                        [..]
                        <span class="action-buttons">
                                <button class="icon-details btn-sidebar" @click="onToggleSidebar" />
                                <button class="icon-fullscreen btn-fullscreen" @click="onToggleDistractionFree" />
                        </span>
                </div>
        </AppContent>

and the style:

.action-buttons {
        position: fixed;
        bottom: 4px;
        right: 20px;
        z-index: 2000;
}

[skjnldsv]

@korelstar works here on webkit with this css :) :

.action-buttons[data-v-c28c672a] {
    position: sticky;
    bottom: 5px;
    left: 100%;
    z-index: 2000;
    display: flex;
    justify-content: space-around;
    width: 100px;
}
.action-buttons button[data-v-c28c672a] {
    padding: 14px;
    width: 44px;
    height: 44px;
    margin: 0;
}

[korelstar]

Thanks for your research, @skjnldsv ! :-) :heart:

This seems to work, but I'm still wondering why the simple solution doesn't work like in non-Nextcloud environments. But I'm interpreting your answer as you have no idea, too.

[korelstar]

Your solution leads to a strange behavior in fullscreen-mode. :-(

I still think, that removing will-change is the best solution.

[skjnldsv]

Let's remove it then! :)

[korelstar]

Great, thanks!