:has() in CSS snippet working on Windows, but not on Linux and Mobile?

What I’m trying to do

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

1 Like

Great catch ! Thank you @holroy , that was it.

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.

Apparently, electron v21 uses a new chromium which comes with new CSS pseudo-classes, including :has(); so it’s pretty recent.

I haven’t been able to make it right on Android though, and I have no idea how to update electron on Chromium there.

I know zero about Capacitor but remember seeing this and mobile not using Electron over on Discord.

Also, DON’T click the link in Joe’s post. It’s been hi-jacked.

1 Like

Super interesting, thank you ! And thanks for the warning concerning the link.

So, I think that this settles it then; I imagine that for Android, there would need to be a version of Capacitor that deals with CSS pseudo-classes.

Thank you both very much for your insight. I think that this can be considered closed for now !

I’ve changed it to point to the official credits section.

1 Like

Thank you. Wasn’t sure if I should flag it or @ joe, but got busy and forgot :pray:t3:

For next time, is flagging it fine?

Just for the fun of it, could you check the following on your mobile device:


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?

Flagging it with a short explanation is fine.

Thanks, that’s an awesome pointer !

Trying this, I get:


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.

No need to simplify your tests, as has: was added in chromium 105, see link below for more details:

So until you get your android updated to at least 105, you’ll not get it working.

1 Like

Thank you so much for solving the mystery ! It all makes complete sense now :smile: !

Well, I’m off to try and update this Chrome version then. In the meantime, everything works perfectly on desktop. Thanks again for your help !

1 Like

After checking the forums of Capacitor, the library used by Obsidian on mobile, it seems that Capacitor uses the version of Chrome built-in in your android version. I’m going to try to check if updating Lineage Os does the trick to update it on my end.

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.

On lineage OS, it looked like the System Webview implemented hasn’t been updated for a while ? I’m not very sure.

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 !

Glad to be of assistance, it seems like you’ve done most of the actual work. I just provided some means to address what needed to be done.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.