So I researched this a little more, and it’s proven to be an icky issue, see the following for related discussions and bugs:
- css - Fixed element disappears in Chrome - Stack Overflow
- https://bugs.chromium.org/p/chromium/issues/detail?id=288747
- html - 'transform3d' not working with position: fixed children - Stack Overflow
My base CSS setup
After some trials and fails, this is how my CSS is looking. Note that the addition of /* */
allows for easy commenting out that line by adding /*
in the front. And below only the basic styling is enabled.
.callout[data-callout="floating"] {
position: fixed;
top: 5px; /* */
right: 10px; /* */
width: 20em; /* */
opacity: 1; /* */
/* overflow: visible; /* */
/* bottom: 10px; /* */
/* min-height: 5vh; /* */
/* z-index: 1000; /* */
/* will-change: transform; /* */
/* transform: translateZ(0); /* */
/* -webkit-transform: translateZ(0); /* */
/* -webkit-transform: translate3d(0, 0, 0); /* */
/* max-width: 22em; /* */
/* bottom: 5px; /* */
background-color: blue; /* */
}
Also notice how the last line changing the background color to blue is not commented out, just to show that we’ve not commented out too much in the trickery above. If it looses the blue color, then revisit the CSS.
With this base setup, in a long page, the box appears floating in the top right, but when you scroll down a certain amount it disappears, and the rest of this post is related to trickery tried to not make it disappear
Applying overflow: visible
This was an early attempt suggested in the first link, and it was left on for the most test cases. Sadly, it didn’t work
Applying transform: translateZ(0)
& co
Several variations of this was tried, including -webkit-transform
, and translate3d()
. Even tried various options of double div
’s with outer div having position: relative
and the transform only applied to inner div. No luck in either incantation.
Applying various heights and widhts
Tried various alternatives with various heights and widths, and min-height and max-width, and so on. No luck on either of these.
Changed z-index
Had no luck in changing the z-index
from 0 to 1 to 1000 to 9994.
Applied will-change: transform
According to some MDN documentation, this could possibly have an effect. It didn’t, besides disabling some of the transform
statements, so I tried with various variant of that as well, without any effect.
Changed to <meta>
element
Some of the posts suggests various changes to the meta element, but Obsidian already implements: user-scalable=no
and maximum-scale=1.0
. And I tried changing to width: 100%
both at the meta element, and body element. No luck with those changes either.
What about position: sticky
Some have had luck using position: sticky
, but neither of the examples I tried worked out for me. Not sure why, as I tried multiple examples which worked nicely in my browser, but not within Obsidian.
Side-track of floating # h1
I also tried attaching style directly to a header element with the following, just to try and check if it had something to do related to placement within the DOM structure, but the header also disappeared. Didn’t try extensively with this option.
Net effect of all of this: The callout is floating when at the top part of the document, and disappears when scrolling enough down into the document.
Attached is my test file, with a somewhat long text so it should be easy to scroll down on most displays. My test environment is the macOS Mojave, 10.14.6, Obsidian 1.1.9 (installer 1.1.9), and the latter indicates Electron 21, Chromium 106.
f53664 Floating Callout.md (11.1 KB)