Problem/Motivation

Google Chrome renders fieldsets with a grey artifact:

Steps to reproduce

The screenshot was taken from the field settings form for a Media field.

Proposed resolution

Either wait for Google Chrome to fix this rendering bug, or change the offending line:

.fieldset {
    border: 1px solid rgba(216,217,224,0.8);
}

Chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1150372

Remaining tasks

To be determined.

User interface changes

Google Chrome 87 renders fieldset without grey artefacts.

API changes

None.

Data model changes

None.

CommentFileSizeAuthor
#35 3183425-claro-styling-35.patch5.29 KBsylus
#29 3183425-claro-styling-64.patch9.93 KBlongwave
#21 3183425-after_patch-20_2.png33.96 KBabhijith s
#21 3183425-after_patch-20_1.png25.26 KBabhijith s
#21 3183425-before_patch.png42.77 KBabhijith s
#20 3183425-20.patch6.05 KBlongwave
#17 3183425-claro-styling-64.patch9.93 KBsylus
#16 claro-test1.png200.98 KBjustafish
Media-settings-for-Article.png146.03 KBidebr

Issue fork drupal-3183425

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

idebr created an issue. See original summary.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented

Fortunately this can be fixed with a change that should happen anyway. The border color is currently set to an RGBA value, but it's preferable to have it be something fixed so it remains the same color regardless of background. In this case, it would just require converting a CSS variable from RGBA to its hex equivalent so in variabless.pcss.css change

  --details-border-color: rgba(216, 217, 224, 0.8);

to

  --details-border-color: #e0e1e5;

and run yarn build:css

jeroent’s picture

jeroent
Primary language Dutch
Location 🇧🇪
commented
Status: Active » Needs work
Issue tags: +Novice

Finn Lewis made their first commit to this issue’s fork.

finn lewis’s picture

finn lewis
Location Oxford
commented

I have this issue on a Drupal 8.9 site, but so far cannot replicate on Drupal 9.2.

Can anyone confirm this is still an issue in Drupal 9.2 and specific steps to replicate?

pandaski’s picture

pandaski commented

I can confirm it is still an issue with Drupal core 9.0.* with Claro as the admin theme

Chrome version: 87

pandaski’s picture

pandaski commented

In Drupal core Claro theme,

blob/9.2.x/core/themes/claro/css/base/variables.pcss.css

line 124

 --details-border-color: rgba(216, 217, 224, 0.8);

the opacity here in rgba function is used to compile the fieldset css

It is not compatible with Chrome 87 for some reasons.

You can reproduce this issue with the example code here

<!DOCTYPE html>
<html>
<head>
<style>
#t1 {
    border: 1px solid rgba(216, 217, 224, 0.8);
    border-radius: 1px;
    background-color: #fff;
}
</style>
</head>

<body>
<fieldset id="t1">
this is a test
</fieldset>
</body>
</html>
idebr’s picture

idebr commented
Status: Needs work » Active

ckrina made their first commit to this issue’s fork.

ckrina opened merge request !61

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Active » Needs review

In my previous comment I've just opened a MR following @bnjmnm but instead of adding the hexadecimal value directly on the --details-border-color value, I've added the variable name in case its value is changed in the future:

--details-border-color: var(--color-lightdiamond);

pandaski’s picture

pandaski commented
Issue tags: +9.1.0 beta testing

tanc made their first commit to this issue’s fork.

tanc opened merge request !64

xjm’s picture

xjm
she/her
Primary language English
commented
Priority: Normal » Major
Issue tags: +rc target
justafish’s picture

justafish
she/her
Primary language English
Location London, UK
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new claro-test1.png200.98 KB

Looking good now! Verified in both Tugboat environments

Screenshot showing the drupal node edit form

sylus’s picture

sylus commented
StatusFileSize
new 3183425-claro-styling-64.patch9.93 KB

Just in case the M.R. gets updated took the most recent diff and placed here as a patch.

a.kovrigin’s picture

a.kovrigin commented

#17 works for me (Drupal 9.0.9, Chrome 87)

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs reroll

The merge request and patch should be created based on 9.2.x which is the current development branch.

longwave’s picture

longwave
he/him
Primary language English
Location UK
commented
Status: Needs work » Needs review
Issue tags: -Needs reroll
StatusFileSize
new 3183425-20.patch6.05 KB

Rerolled for 9.2.x.

abhijith s’s picture

abhijith s commented
StatusFileSize
new 3183425-before_patch.png42.77 KB
new 3183425-after_patch-20_1.png25.26 KB
new 3183425-after_patch-20_2.png33.96 KB

Applied patch #20 on 9.2.x. and it works fine.The grey container is gone from both edit form and form settings after the patch.
Adding screenshots below.

Before:
before

After(form settings);
after

After(edit form):
after2

abhijith s’s picture

abhijith s commented
Status: Needs review » Reviewed & tested by the community
idebr’s picture

idebr commented
Issue summary: View changes

Added reference to Chromium bug https://bugs.chromium.org/p/chromium/issues/detail?id=1150372

  • lauriii committed 239b5a8 on 9.2.x 
    Issue #3183425 by tanc, ckrina, longwave, sylus, Abhijith S, idebr,...

  • lauriii committed de657c8 on 9.1.x 
    Issue #3183425 by tanc, ckrina, longwave, sylus, Abhijith S, idebr,...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Version: 9.2.x-dev » 9.1.x-dev
Status: Reviewed & tested by the community » Fixed

Committed 239b5a8 and pushed to 9.2.x. Also cherry-picked to 9.1.x. Thanks!

danthorne’s picture

danthorne
Primary language English
Location Devon, UK
commented

Will this be fixed in D8?

joel_osc’s picture

joel_osc commented

@DannyBoing I have tested the patch from #64 on D8.8 and it works.

longwave’s picture

longwave
he/him
Primary language English
Location UK
commented
Title: Google Chrome 87 renders fieldset with grey artefacts » [backport] Google Chrome 87 renders fieldset with grey artefacts
Version: 9.1.x-dev » 8.9.x-dev
Status: Fixed » Needs review
StatusFileSize
new 3183425-claro-styling-64.patch9.93 KB

Reuploading #17 which applies cleanly to 8.9.x.

idebr’s picture

idebr commented

The rendering of grey artefacts was fixed in Chromium and has been included in the latest stable release for Google Chrome, so this issue can be fixed locally by updating the browser. See https://bugs.chromium.org/p/chromium/issues/detail?id=1150372

danthorne’s picture

danthorne
Primary language English
Location Devon, UK
commented

Thanks @idebr this worked.

mradcliffe’s picture

mradcliffe
he/him
Primary language English
commented
Issue tags: -Novice

I am removing the Novice tag from this issue for based on the Chromium fix making it a bit more difficult to test the back port patch.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Version: 8.9.x-dev » 9.1.x-dev
Status: Needs review » Fixed

Marking this as fixed since I don't think we should backport this to 8.9.x because of the difficulty of testing this.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

sylus’s picture

sylus commented
StatusFileSize
new 3183425-claro-styling-35.patch5.29 KB

I needed a patch that applied against the latest 9.0.14+ as some changes made this patch no longer apply.

Attaching the updated patch for that branch.