[PR #3848] [MERGED] fix: perfomance in safari #4554

New issue

Closed

opened 2026-03-17 02:04:45 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:04:45 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3848
Author: @nivedin
Created: 2/21/2024
Status: ✅ Merged
Merged: 2/21/2024
Merged by: @AndrewBastin

Base: release/2023.12.6 ← Head: fix/safari-codemirror-perf-bug

📝 Commits (10+)

6198a25 fix: absolute gql response codemirror position
1eb5e02 fix: add parent container for codemirror instance
7e1ebd5 fix: add parent container for codemirror instance in gql
2e8a04f fix: add parent container for codemirror instance in realtime
8b0f337 chore: remove unwanted style
c66ea66 fix: increase paintfull performance
6a65eb0 fix: add parent container for codemirror instance in gql schema
e6cc235 fix: add parent containers for codemirror instances
cd7429d fix: add parent containers for codemirror instances
a870725 chore: enable cm scrollbar

📊 Changes

18 files changed (+50 additions, -36 deletions)

View changed files

📝 packages/hoppscotch-common/assets/scss/styles.scss (+5 -0)
📝 packages/hoppscotch-common/src/components/graphql/RequestOptions.vue (+1 -1)
📝 packages/hoppscotch-common/src/components/graphql/Response.vue (+3 -1)
📝 packages/hoppscotch-common/src/components/graphql/Sidebar.vue (+3 -5)
📝 packages/hoppscotch-common/src/components/graphql/Variable.vue (+3 -1)
📝 packages/hoppscotch-common/src/components/http/Headers.vue (+3 -1)
📝 packages/hoppscotch-common/src/components/http/Parameters.vue (+3 -1)
📝 packages/hoppscotch-common/src/components/http/PreRequestScript.vue (+2 -2)
📝 packages/hoppscotch-common/src/components/http/RawBody.vue (+3 -1)
📝 packages/hoppscotch-common/src/components/http/RequestTab.vue (+1 -1)
📝 packages/hoppscotch-common/src/components/http/Tests.vue (+2 -2)
📝 packages/hoppscotch-common/src/components/http/URLEncodedParams.vue (+3 -1)
📝 packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue (+3 -5)
📝 packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue (+6 -5)
📝 packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue (+3 -1)
📝 packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue (+3 -1)
📝 packages/hoppscotch-common/src/components/realtime/Communication.vue (+3 -1)
📝 packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts (+0 -6)

📄 Description

Closes HFE-433

Description

The overall performance in Safari especially when the response section is rendered was bad and laggy.

The performance of the app in safari was bad for the following reasons

The codemirror didn't have a parent container which leads to attain the height of the next parent element which inherited the height of the splitpanes which lead to lag while changing the height of the splitpanes
The browser was unaware (mostly safari) of the layout paint areas due to splitpanes height/width changes rapidly, adding will-change property and changing the splitpanes to a new layer reduced the Cumulative Layout Shift and Total Blocking Time to half

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/3848 **Author:** [@nivedin](https://github.com/nivedin) **Created:** 2/21/2024 **Status:** ✅ Merged **Merged:** 2/21/2024 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `release/2023.12.6` ← **Head:** `fix/safari-codemirror-perf-bug` --- ### 📝 Commits (10+) - [`6198a25`](https://github.com/hoppscotch/hoppscotch/commit/6198a25bc67effe7e7f419680d874840b2165013) fix: absolute gql response codemirror position - [`1eb5e02`](https://github.com/hoppscotch/hoppscotch/commit/1eb5e02100683dbbd370d1bb88c5928d14d68723) fix: add parent container for codemirror instance - [`7e1ebd5`](https://github.com/hoppscotch/hoppscotch/commit/7e1ebd5b4358a0c22f52448b74e1e552801e04eb) fix: add parent container for codemirror instance in gql - [`2e8a04f`](https://github.com/hoppscotch/hoppscotch/commit/2e8a04fbd6f527eed03e829201badb2b973f5220) fix: add parent container for codemirror instance in realtime - [`8b0f337`](https://github.com/hoppscotch/hoppscotch/commit/8b0f337280cb46b1b7679af09577643d9267c883) chore: remove unwanted style - [`c66ea66`](https://github.com/hoppscotch/hoppscotch/commit/c66ea6668973d31371bf91536060c84853838f15) fix: increase paintfull performance - [`6a65eb0`](https://github.com/hoppscotch/hoppscotch/commit/6a65eb03e7ef7e31f78aa463591083d7662eb140) fix: add parent container for codemirror instance in gql schema - [`e6cc235`](https://github.com/hoppscotch/hoppscotch/commit/e6cc23553236fef72c5a530db5f4adf3e1a9edb7) fix: add parent containers for codemirror instances - [`cd7429d`](https://github.com/hoppscotch/hoppscotch/commit/cd7429dd2425e318164a93cfca167ae535900e4c) fix: add parent containers for codemirror instances - [`a870725`](https://github.com/hoppscotch/hoppscotch/commit/a870725abf83878785866b2e5d45f283733d569a) chore: enable cm scrollbar ### 📊 Changes **18 files changed** (+50 additions, -36 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/assets/scss/styles.scss` (+5 -0) 📝 `packages/hoppscotch-common/src/components/graphql/RequestOptions.vue` (+1 -1) 📝 `packages/hoppscotch-common/src/components/graphql/Response.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/components/graphql/Sidebar.vue` (+3 -5) 📝 `packages/hoppscotch-common/src/components/graphql/Variable.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/components/http/Headers.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/components/http/Parameters.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/components/http/PreRequestScript.vue` (+2 -2) 📝 `packages/hoppscotch-common/src/components/http/RawBody.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/components/http/RequestTab.vue` (+1 -1) 📝 `packages/hoppscotch-common/src/components/http/Tests.vue` (+2 -2) 📝 `packages/hoppscotch-common/src/components/http/URLEncodedParams.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue` (+3 -5) 📝 `packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue` (+6 -5) 📝 `packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/components/realtime/Communication.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts` (+0 -6) </details> ### 📄 Description Closes HFE-433 ### Description The overall performance in Safari especially when the response section is rendered was bad and laggy. The performance of the app in safari was bad for the following reasons - The codemirror didn't have a parent container which leads to attain the height of the next parent element which inherited the height of the splitpanes which lead to lag while changing the height of the splitpanes - The browser was unaware (mostly safari) of the layout paint areas due to splitpanes height/width changes rapidly, adding will-change property and changing the splitpanes to a new layer reduced the Cumulative Layout Shift and Total Blocking Time to half ### Checks - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>