Issue metadata
Sign in to add a comment
|
Odd background-color rendering problem creating artifacts on fixed elements
Reported by
posta...@gmail.com,
Sep 13 2017
|
||||||||||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:55.0) Gecko/20100101 Firefox/55.0
Steps to reproduce the problem:
1. Create a fixed element with a darkish background-color (something like #171c21)
2. Apply overflow: hidden to the element
3. To reproduce the problem more accurately, apply a similar dark-ish background-color to the body (something like #21252b)
What is the expected behavior?
Everything should be rendered as normal, without blocks/artifacts?
What went wrong?
Large blocks or random artifacts appear near the fixed element, with a similar color hex
Did this work before? Yes Last version of Chrome I had installed for Linux, not sure which?
Does this work in other browsers? Yes
Chrome version: 61.0.3163.79 (Official Build) (64-bit) Channel: stable
OS Version: Ubuntu 16.04.3 LTS
Flash Version: Shockwave Flash 27.0 r0
I came up with a hotfix, by creating a 1 by 1 pixel png file filled with the same color hex as the desired background color, and then applying the background-image attribute (example: background-image: url('renderfix/171c21.png');) below the color attribute. After doing this, everything seems to render perfectly. I don't believe this is a driver issue because I've tested it on 3 different Linux systems and it seems to have the same problem. The main Linux system I discovered the bug on was Elementary OS Loki which is built upon Ubuntu 16.04 LTS.
,
Sep 13 2017
Can you provide a sample testcase for the ease of repro.
,
Sep 13 2017
Sure.
One of the elements that were affected was my navigation bar, which has a fixed position and is positioned at the top.
This created an odd box shaped artifact inside near the right of the navigation bar. Other elements with similar positioning and settings also had large box artifacts on the outside, with similar colors.
Here is the CSS for my navigation bar (before my hotfix)
.nav-container {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
padding: 0 8px 0 8px;
text-align: center;
background-color: #171c21;
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
-webkit-animation-duration: 250ms;
animation-duration: 250ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: 350ms;
animation-delay: 350ms;
overflow: hidden;
z-index: 10;
}
And here is the CSS for the body:
body {
min-width: 320px;
max-width: 726px;
margin-left: auto;
margin-right: auto;
padding: 50px 8px 8px 8px;
background-color: #21252b;
overflow-x: hidden;
overflow-y: scroll;
pointer-events: none;
}
I'm not sure what else I could provide to reproduce the bug. It seems to be happening to random fixed elements with dark-ish background colors, and in this case it only happens to my navigation bar if overflow is hidden, but is odly fixed when I remove that attribute. I need overflow to be hidden so I applied my own hotfix: background-image: url('renderfix/171c21.png');
,
Sep 13 2017
And here are the keyframes for the animation which my navigation bar uses:
@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
,
Sep 14 2017
@Reporter: Could you please provide a sample test URL or jsfiddle to test the issue from TE-end
,
Sep 14 2017
I can't provide a test URL, and JSFiddle does not reproduce the bug because they are using some sort of CSS reset overlay, or something else that is hiding the bug. I can view the test.html file on my browser on Linux and it shows up in Chrome, but not Firefox. Tested it on Windows Chrome and Firefox, no bug.
Just create an HTML file with the content:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="nav-container"></div>
</body>
</html>
And a CSS file with content:
.nav-container {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color: #171c21;
overflow: hidden;
z-index: 1;
}
body {
background-color: #21252b;
}
in the same directory, and run the file in my version of Chrome for Linux.
I simplified the code down to the minimum while still producing the bug.
,
Sep 14 2017
Thank you for providing more feedback. Adding requester "sc00335628@techmahindra.com" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Sep 14 2017
If you are using the same version of Chrome, that should produce an unnessecary gray box below the nav-container.
,
Sep 14 2017
Thanks for the extra information. I'm asking our test team to try and reproduce this, can you provide some screenshots of the bug for reference?
,
Sep 14 2017
,
Sep 15 2017
Here is an attached screenshot. As you can see, on the left (Firefox), on the right (Chrome). I have reproduced this problem with the attached HTML+CSS in this same version of Chrome on more than one Linux systems based on Ubuntu.
,
Sep 15 2017
The artifacts get uglier the more fixed objects you have. For example, I have another fixed object in the bottom right corner of my site, which leaves a large gray square in the background behind it.
,
Sep 15 2017
Thank you for providing more feedback. Adding requester "mikelawther@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Sep 15 2017
I have all of my repositories up-to-date and have installed the latest updates for all of my browsers. This problem popped up literally 3 days ago after doing a system-wide update on all of my applications. I did not do any driver updates, or make any changes to the operating system.
,
Sep 15 2017
Tentatively assigning this to the Paint team
,
Sep 15 2017
Quick update, I just noticed the rendering problem also exists in Chrome's "New Tab" and elsewhere. I switched back to the default browser GUI and theme as well, and the problem remains on my test page as well as my project.
,
Sep 15 2017
If I'm not mistaken, that tab is also styled with CSS? Viewing the page source also reveals that specific elements on "New Tab" are also styled with similar attributes such as fixed positioning and hidden overflows.
,
Sep 15 2017
Just upgraded from Chrome 61.0.3163.79 to 61.0.3163.91 (which seems to have just been released today) for Linux, and the problem is now gone. Was this bug previously reported? I searched deeply for a solution to my problem and could not find anything. Oddly, the problem no longer exists. I am a little confused at the moment.
,
Sep 15 2017
Thanks for the update. I'm not aware of any fixes specifically that would have changed this. I took a quick look through the change logs for those versions (https://chromium.googlesource.com/chromium/src/+log/61.0.3163.79..61.0.3163.91?pretty=fuller&n=10000) but didn't see anything obvious. I'll mark this as closed, please open a new bug and reference this one if the problem comes back.
,
Sep 15 2017
My pleasure. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by posta...@gmail.com
, Sep 13 2017