So I researched this a little more, and it’s proven to be an icky issue, see the following for related discussions and bugs:
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.
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
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
transform: translateZ(0) & co
Several variations of this was tried, including
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.
Had no luck in changing the
z-index from 0 to 1 to 1000 to 9994.
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.
Some of the posts suggests various changes to the meta element, but Obsidian already implements:
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.
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
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)