I’ve been making a css code snippet to fix a small issue with the plugin obsidian-banner and its compatibility with the new “inline title” option of Obsidian (see here).
To that end, I use the css :has() selector (see here). In the end, my snippet works great on Windows; but it doesn’t work on Linux and Android. After fiddling around, it seems that the :has() selector doesn’t work at all on Linux or Android.
So, would anybody know why the :has() selector only seem to work on Windows ? Obsidian has the same version on all OS, but it’s still not working for me. I’ve tried searching for things that could explain why this is the case, but I’ve found nothing so far.
Are you able to check your electron and chromium version on linux and android?
Or put another way, do you have access to a javascript console on either of those platforms?
I half heartedly have tried getting access to the console on Android, but not succeeded yet. However, I do know the android version might not be entirely up to par with the desktop versions
On Windows, the electron version was v21, but it was much older on Linux; even if Obsidian was up-to-date on linux. Re-installing Obsidian on Linux did the trick to have electron at the right version.
Just for the fun of it, could you check the following on your mobile device:
```dataviewjs
dv.span(navigator.appVersion)
```
On my Android, with Obsidian 1.4.1 (83), it returns the following for the Chrome-section: Chrome/109.0.5414.118, and that should indicate that it has support for has: selector. If I’m not mistaken, it should have been added in version 105.
I’ve not tested it so far, but it should be present, I think. Which version of Obsidian are you running, and what does the above command report back?
Maybe you just got an issue related to the DOM structure being slightly different on Android? Maybe you should try doing a slightly broader test to check whether the has: is actually working, and it’s just your CSS selectors which are wrong?
So, it seems that I have an older version of built-in chrome. Since I’m using LineageOS with Micro G (so, no google apps), that might be a reason why. I haven’t found a way to upgrade that for now, but I’ll keep looking for it.
As for testing the :has selector, I’ve tried simpler snippets to just turn the background of some elements red; this allowed me to check simpler conditions to see that it’s the :has that just doesn’t work in my case.
Ok, so I think I got it working well on Android. It seems to all come down from the “system webview”, which is basically the minimal web browser used by the Android system to quickly open some web pages, or to make some apps (like Obsidian) work. One can see the Webview version in System Settings, Develloper Options, Webview Implementation.
Normally, on android, there is an app called the Android System Webview on the playstore that is updated by the OS, and by google.
On custom ROMs like Lineage OS, things seem more complicated. The implemented webview will depend on whatever the devs of the ROM choose, and when they update it.
In any case, I solved my issue by downloading a new webview that still has no google in it, but does contain the new functions of chromium needed for :has() to work. This can be done by installing Magisk, then Fox Magisk module manager, and then the module Webview manager. I installed the latest version of the Bromite webview (based on the Bromite browser). Fair warning : it seems that some versions of Bromite can make the Obsidian app crash.
But the version 108.0.5359.156 of Bromite seems to be working great for Obsidian. Now, I get Chrome/108.0.5359.156 with the dataview snippet given by Holroy, and my CSS snippet works great on android too.
So finally, I can say that everything is solved. Thanks again holroy !
!