[PR #1305] [MERGED] CB-2733 remove the cause of browser reflow #2397

New issue

Closed

opened 2026-03-07 21:08:44 +03:00 by kerem · 0 comments

kerem commented

2026-03-07 21:08:44 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/dbeaver/cloudbeaver/pull/1305
Author: @devnaumov
Created: 11/20/2022
Status: ✅ Merged
Merged: 11/28/2022
Merged by: @devnaumov

Base: devel ← Head: CB-2733-safari-value-panel-image-issue

📝 Commits (1)

976a6fb CB-2773 remove the cause of browser reflow

📊 Changes

1 file changed (+1 additions, -1 deletions)

View changed files

📝 webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ValuePanelTools/VALUE_PANEL_TOOLS_STYLES.ts (+1 -1)

📄 Description

When an image loads, it goes from a height of 0 pixels to whatever it needs to be. This causes reflow, where the content below or around the image gets pushed to make room for the freshly loaded image. Reflow is a problem it’s a user-blocking operation. It slows down the browser by forcing it to recalculate the layout of any elements that are affected by that image’s shape. We force aspect ratio to avoid this issue.

_{🔄 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/dbeaver/cloudbeaver/pull/1305 **Author:** [@devnaumov](https://github.com/devnaumov) **Created:** 11/20/2022 **Status:** ✅ Merged **Merged:** 11/28/2022 **Merged by:** [@devnaumov](https://github.com/devnaumov) **Base:** `devel` ← **Head:** `CB-2733-safari-value-panel-image-issue` --- ### 📝 Commits (1) - [`976a6fb`](https://github.com/dbeaver/cloudbeaver/commit/976a6fb3093b2f2cc886377ea94526f5355c9428) CB-2773 remove the cause of browser reflow ### 📊 Changes **1 file changed** (+1 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ValuePanelTools/VALUE_PANEL_TOOLS_STYLES.ts` (+1 -1) </details> ### 📄 Description When an image loads, it goes from a height of 0 pixels to whatever it needs to be. This causes reflow, where the content below or around the image gets pushed to make room for the freshly loaded image. Reflow is a problem it’s a user-blocking operation. It slows down the browser by forcing it to recalculate the layout of any elements that are affected by that image’s shape. We force aspect ratio to avoid this issue. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>