efemkay / obsidian-modular-css-layout

CSS Layout hack for Obsidian.md
https://efemkay.github.io/obsidian-modular-css-layout/
GNU General Public License v3.0
974 stars 74 forks source link

Seems to have serious performance issues #67

Open Steven-AA opened 10 months ago

Steven-AA commented 10 months ago

Turn on the CSS: image Turn off the CSS: image

Obsidian: 1.5.1

Steven-AA commented 10 months ago

It should be conflicting with a certain plugin. I can use it normally with restricted mode. I have opened a lot of plugins, making it difficult to pinpoint specific issues.

efemkay commented 10 months ago

hey @DefaultPerson. i sort of figured it out what's going on with it. below is obsidian forum post for quick info for now.

anyway, tl;dr, it's a combination of my use of css :has() and plugins need to refresh the opened note every half a second or so. another plugin that i just know refreshes like that is excalidraw.

i'm still trying to figure the best way to tackle this (and it's not helping that i'm usually busy with work stuff as year end approaches). but hopefully soon enough

https://forum.obsidian.md/t/columns-css-columns-plugin-creates-performance-issues/70142

Steven-AA commented 10 months ago

It seems that the problem is located, I am reopening this issue.

In my experience, using Excalidraw alone works well, as does opening MCL in restricted mode. However, when I open both Excalidraw and MCL simultaneously, the system becomes unusable. I experience significant lag in typing.

Additionally, this issue is not limited to Excalidraw. When MCL is active, enabling more plugins increases the lag. This complexity made it challenging to identify the conflicting plugin. I have numerous plugins, and it's difficult for me to determine if a plugin will refresh an opened note.

vadhmln commented 9 months ago

Hi, guys! Some additional info. When enabling Emoji Shortcodes plugun with MCL Multi Column snippet is enabled, also adds a bit slowness.

BonsenW commented 8 months ago

Hey so i actually tried this in a sandbox vault, and found that even with restricted mode and no other snippets, Multi-column snippet still slowed down my typing, BUT, i removed this section and it seemed to work. Could be a temporary solution for some.

/* -- Special Adjustment for Themes -- */

        /* Minimal. Minimal Float. (duplicate from Multi Column. Redid "minimal-float" for Minimal V7.0 */
        /* minimal own wide table will not work together with float */
        /* undo the Minimal "cm-line" sizing */
        :is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-contentContainer.cm-contentContainer>.cm-content>div,
        :is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.embedded-backlinks,
        :is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.inline-title,
        :is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.metadata-container
            { max-width: none; width: auto; }
        /* Re-set the default "cm-sizer" width but respect Minimal Settings */
        :is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer { max-width: var(--max-width); width: var(--line-width); }

        /* to be deleted by 30 Sep 2023 */
        /* Minimal - Undo the theme flex layout by default. To apply per note basis */
            /* body[class*="minimal-tab-title"].contextual-typography .minimal-float.markdown-preview-view.markdown-preview-view .markdown-preview-sizer { display: unset; } */
        /* Minimal - Live Preview float support. Need to revert cm-content width to default theme but cm-embed to auto */
            /* body[class*="minimal-tab-title"] .minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer { width: calc(var(--line-width-adaptive) - var(--folding-offset)); max-width: calc(var(--max-width) - var(--folding-offset)); margin-right: auto; margin-left: max(calc(50% + var(--folding-offset) - var(--line-width-adaptive)/ 2), calc(50% + var(--folding-offset) - var(--max-width)/ 2)) !important; } */
            /* .minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6.is-readable-line-width .cm-line { width: auto; max-width: 100%; margin-left: 0 !important; } */
            /* body[class*="minimal-tab-title"] .minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout> :is(.callout[data-callout-metadata*="left"], .callout[data-callout-metadata*="right"]) { max-width: none; margin-left: 0 !important;} */
            /* body[class*="minimal-tab-title"] .minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6 .cm-embed-block.cm-callout > .callout { width: auto; } */
        /* Minimal - Live Preview float support. Undo margin-left for Image */
            /* .minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6 .cm-embed-block.cm-callout :is(.callout[data-callout-metadata*="left"], .callout[data-callout-metadata*="right"]) .internal-embed.image-embed { margin-left: auto !important; } */

            /* fix to support Breadcrumbs plugin. Sub to the above LP float fix for Minimal */
            body[class*="minimal-tab-title"].contextual-typography .minimal-float.markdown-preview-view.markdown-preview-view .BC-trail.markdown-preview-sizer { display: flex; }

        /* Minimal - Gaps/Margin adjustment. to be removed by 31 Aug 2023 */
        /* body[class*="minimal-tab-title"] .minimal-float.wide-page div[data-callout*="blank"].cm-callout:is(div[data-callout-metadata*="left"]) { margin-left: 20px !important; } */

        /* Minimal - Size Option fix due to !important */
        /* Minimal. Uses body[class*="minimal-tab-title"] as identifier. To override (have higher specificity) the width param. Can be merged to main code later on */
        @media (min-width: 500px){
            body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout-metadata$="small"].callout { width: var(--float-small-width) !important; margin-left: 0 !important; }
            body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout-metadata$="medium"].callout { width: var(--float-medium-width) !important; margin-left: 0 !important; }
        }
        @media (min-width: 750px){
            body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout-metadata$="large"].callout { width: var(--float-large-width); margin-left: 0 !important; }
        }
archuser123445 commented 6 months ago

Adding on, the performance issues are only serious when enabling the MCL Gallery Cards.

Thanks!

mickahouan commented 6 months ago

Same problem here. Thanks