Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Bug Report:
=====================
Black on black is unreadable
Proposed Solution:
=====================
Remove the black background color which results in a white background and text becomes readable in weird situations where you have long links and long words on mobile devices
Summary:
=====================
This change is the result of working on two issues:
https://www.drupal.org/node/1085472
https://www.drupal.org/node/2679126
Before Change:
=====================
After Change:
=====================
| Comment | File | Size | Author |
|---|---|---|---|
| #14 | 2847886-black_on_black_comments-14.patch | 393 bytes | jpassetti |
| #13 | background_color_of-2847886-13.png | 8.22 KB | star-szr |
| #2 | bartik-background-change-2847886-2.patch | 289 bytes | ccjjmartin |
| Screen Shot 2017-01-29 at 4.41.20 PM.png | 171.51 KB | ccjjmartin | |
| Screen Shot 2017-01-29 at 4.40.50 PM.png | 169.02 KB | ccjjmartin | |
Comments
Comment #2
ccjjmartin CreditAttribution: ccjjmartin as a volunteer commentedComment #3
ccjjmartin CreditAttribution: ccjjmartin as a volunteer commentedComment #4
ccjjmartin CreditAttribution: ccjjmartin as a volunteer commentedComment #5
abbym CreditAttribution: abbym at Third and Grove commentedccjjmartin - can you provide steps to replicate this bug? I'm having a hard time getting the original issue to appear, but may be looking in the wrong place. Thanks!
Comment #6
amklose@ccjjmartin Are you suggesting that the option to make the background black should be removed?
Comment #7
Anilu@I was able of reproduce this issue but only under 185 px screen width. So i'm wondering if this issue is still relevant.
Probably it will be a good idea do testing on different browser versions. I'm on Chrome Version 57.0.2987.133 (64-bit)
Follow the next steps in order to reproduce this issue:
Comment #8
poojakural CreditAttribution: poojakural at Srijan | A Material+ Company commented@Anilucoto Tested this issue less than 185px and could replicate this issue. but the standard size of minimum screen resolution is 320px. Do we really consider this much width?
Comment #9
Anilu@@poojakural It's the same question I ask myself.
I do not think it is necessary if this is the case, but I'm not sure that it is the only case, it is possible that in other browsers or other conditions it is possible to reproduce the error.
Comment #10
Neetika K CreditAttribution: Neetika K commentedApplied the patch #2
Tested on 320 px screen.
Actual: Good to go to RTBC
Comment #11
Neetika K CreditAttribution: Neetika K commentedComment #12
ccjjmartin CreditAttribution: ccjjmartin as a volunteer commentedSorry for taking so long to respond. This is reproducible in many ways but the easiest is to add commenting to a content type. Then add a comment on a node. Put some really long words (or possibly links) in the comment. Then also reply to that comment and additionally put long words and/or long links in the reply comment.
I am sure there are other ways to reproduce this error. The general idea is that if the content extends beyond the page border and we get the background to be visible then we have black text against a black background.
Comment #13
star-szrThe issue I see with making this change is that "shorter" pages (when the entire content fits vertically on screen without scrolling) will have a white background below the footer. I think we need to look into other ways to fix this.
Attaching a rough screenshot to show what I mean.
Comment #14
jpassetti CreditAttribution: jpassetti commentedI believe the simplest fix is to make the background color of .comment__content white, so if the comment does bleed over, the text is still readable.
This solution only works if the css declaration word-break: break-all is present. Issue #2679126 intends to remove this declaration.
It's worth noting that we should develop a better responsive CSS solution for the comments region for smaller viewports. The CSS declaration display: table is not ideal for smaller viewports, but is out of scope for this issue.
Comment #16
cverde CreditAttribution: cverde as a volunteer commentedI tested with @quicksketch this on 8.5.x and it has been solved by #1085472: Long strings within comments break Bartik's page layout.