Skip to content

Commit

Permalink
Fix Blink rendering due to broken CSS (#7)
Browse files Browse the repository at this point in the history
## Summary:

We (well, Walt) discovered an issue with Chrome rendering oddly in our Labeling project.
Turn out this affects any Blink rendered browser (Edge, Brave) - and one of the CSS style sheet
`dm/css/main.css` was not applied.  This does not affect Firefox or Safari, which use different
rendering engine.

We have not deployed anything to Label Studio for the last 3 weeks.

Digging in a bit, it turns out that only "some" of the style from `dm/css/main.css` is not applied.
Binary searching the style, this is the culprit line:

```
// works
.dm-grid-view__cell {
    box-sizing: border-box;
    padding: 16px 16px 0 0
}

// invalid!
.dm-grid-view__cell:nth-child(var(--column-count)) {
    padding-right: 0
}

// fail
.dm-grid-view__cell-header {
    background: #f9f9f9;
    display: flex;
    justify-content: space-betwee;
    padding: 5px;
    width: 100%
}
```

Removing that CSS selector seems to have fix the rendering issue - CSS variable cannot be used in sub selector
and this breaks (only) blink renderer.

From this, it is easy to reference the main branch issue.  Here is the main Label
Studio fix, which reference a break that happens 2 weeks ago:

* issues (fixed in 1.13): HumanSignal#6256
* fix commit: HumanSignal@cb6e4c3

NOTE: that this is part of the `data manager` setup which will not be overwritten by
our front-end deploy (this is a separate package).

Issue: https://khanacademy.atlassian.net/browse/DI-1565

## Test Plan

Deploy on test and see rendering is fixed.

(see test project, screenshot ommited since this is an open repo)

Author: dat-boris

Reviewers: wwells

Required Reviewers:

Approved By: wwells

Checks: ✅ Submodules/deps

Pull Request URL: #7
  • Loading branch information
dat-boris authored Sep 10, 2024
1 parent 6924ed5 commit 6f7942b
Showing 1 changed file with 1 addition and 1 deletion.
Loading

0 comments on commit 6f7942b

Please sign in to comment.