CSS snippet for img tag affect press hold behavior on iOS

Steps to reproduce

This happens on iOS.

  1. Add a CSS snippet and enable it on iPhone.
img {
    width: 350px;
}
  1. In Files tree view, press and hold on a folder.

Did you follow the troubleshooting guide? [Y/N]

Y

Expected result

Expect the context menu shows up without any other behavior happens.

Actual result

Before I release my finger, a black box (I think it is a tooltip?) appears. If I don’t have the CSS snippet for img, then this won’t happen.

Environment

SYSTEM INFO:
	Operating system: ios 18.2.1 (Apple iPhone15,2)
	Obsidian version: 1.8.3 (183)
	API version: v1.8.3
	Login status: logged in
	Language: en
	Catalyst license: none
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 27
	Restricted mode: off
	Plugins installed: 16
	Plugins enabled: 15
		1: Advanced Tables v0.22.1
		2: Completr v3.2.0
		3: Dataview v0.5.67
		4: Excalidraw v2.8.0
		5: Tag Wrangler v0.6.1
		6: Pseudocode v1.6.1
		7: Paste Image Rename v1.6.1
		8: Math in Callouts v0.3.7
		9: Ledger v0.3.3
		10: Folder notes v1.7.35
		11: Image in Editor v2.2.6
		12: Kanban v2.0.51
		13: Iconize v2.14.7
		14: Quick Switcher++ v4.6.3
		15: Latex Suite v1.9.8

RECOMMENDATIONS:
	Custom theme and snippets: for cosmetic issues, please first try updating your theme and disabling your snippets. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community theme and snippets.
	Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community plugins.

Additional information

ScreenRecording_01-31-2025 05-23-42_1

It also affect the tab switcher view. So right now, I use .image-embed img to be sure.

Bug reports aren’t generally considered using custom CSS. Your clip also isn’t using the default theme.

Custom theme and snippets: for cosmetic issues, please first try updating your theme and disabling your snippets. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community theme and snippets.


You can use something like this to restrict the CSS to only notes:

 .workspace-leaf-content[data-type="markdown"] img {
    width: 350px;
}

Sure, I close it then. I test it on mobile, so to test on an empty vault requires a bit of effort.

It happens for me as well:

Not sure why it is happening, but your original snippet is targeting every img in Obsidian. It’s probably better to be a bit more specific. :slight_smile:

Yeah, I replace it with .image-embed img. Originally, I use img to set the image width to be 350px since there are images are wider than my phone width, I didn’t about the fact that img is use a lot for live preview like the cm-widgetBuffer class.

Thanks for your testing anyway.