SlRvb / Obsidian--ITS-Theme

Theme designed with readability and customizability in mind. Change it easily to your liking with the Style Settings plugin installed.
https://publish.obsidian.md/slrvb-docs/ITS+Theme/ITS+Theme
GNU General Public License v2.0
523 stars 112 forks source link

[Bug] ITS image size CSS classes interfere with the Obsidian mobile 'Image Zoom' feature #174

Closed Jnosh closed 1 year ago

Jnosh commented 1 year ago

Describe the bug

Obsidian mobile has a built-in equivalent of the ITS 'Image Zoom' option. The feature normally centers the image over the page and shows it at full size or fills the screen. While it ignores the native Obsidian image size adjustments (![[image.jpg|100x100]]) it doesn't handle the ITS image size CSS classes and the image is shown at the size specified through the ITS CSS classes instead of the full image size.

e.g. ![[image.jpg|htiny cover]] will show the image with a height of 100px even if the source image is much larger.

Expected behavior Ideally ITS size & positioning adjustments should be disabled when the image is viewed with the mobile image viewer. Currently only the size is causing issues but disabling positioning stuff in that viewer is probably the safe choice as well.

To Reproduce

OS

Obsidian Mobile 1.4.1 on iPad OS 16.3

Additional context

The mobile image viewer seems to use the mobile-image-viewer CSS class which can be used to gate CSS based on whether one is in the image viewer or not.

I am currently using the following hacky CSS snippet as a workaround but this can probably be solved more cleanly in ITS itself by disabling the relevant adjustments when the image is in the image viewer.

.mobile-image-viewer img {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain;
}
SlRvb commented 1 year ago

Should be fixed now in the ITS Beta update 🥳 c878dbcb15376ef68454e89404085dd539b44fb3