New issue
Advanced search Search tips

Issue 899515 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 898950
Owner:
Closed: Dec 17
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 3
Type: Bug



Sign in to add a comment

Pixels on right side of button clip when background has gradient

Reported by k...@moretz.com, Oct 27

Issue description

Chrome Version       : 69.0.3497.81
OS Version: Pop!_OS (Linux, Ubuntu-based) 18.04 LTS
URLs (if applicable) : (not included, as the page requires being signed up to view the problematic component. This is impossible as we are currently in private beta)
Other browsers tested:
  Add OK or FAIL after other browsers where you have tested this issue:
    Firefox: OK

What steps will reproduce the problem?
1. Create a button with a border-radius and a linear-gradient background, within a div
(I am not entirely sure what characteristics this containing div must have, as I have been unable to replicate it in some cases without divs similar to those in my application. The test case file has three containers with various characteristics that properly replicate the problem, but I am unsure which of these are entirely necessary.)
2. Resize the screen (with a screen width of at least 400px in the test case uploaded) and view the button while resizing.

What is the expected result?
The full rounded border of the button consistently appears, rather than varying based on the screen width.

What happens instead of that?

The right side of the button appears to intermittently clip off the edge of the rounded border, and stays this way at certain screen widths but not others.

Please provide any additional information below. Attach a screenshot if
possible.

In my application, there is also a 1px wide div with a darkened background that acts as a divider, which clips to appear as if it is 0px wide at certain screen widths. This was more difficult to condense into a simplified demonstration, but if it is necessary and these bugs are not connected I can produce a demonstration of that as well and report it separately. However, these do seem to be connected, as they both clip at the same screen widths.

I have additionally attempted to resolve this by disabling hardware acceleration, which did not solve the problem for me.

UserAgentString: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/69.0.3497.81 Chrome/69.0.3497.81 Safari/537.36



 
demo.html
1.0 KB View Download
screenshot.png
2.0 KB View Download
Labels: Needs-Triage-M69
Components: Blink>Paint
Owner: schenney@chromium.org
Status: Assigned (was: Unconfirmed)
I have created a fiddle which reproduces the issue using Chrome Version 70.0.3538.77 (Official Build) (64-bit) on MacOS 10.14.

In my case however, the bottom is clipped.

https://jsfiddle.net/0geyfb63/
Status: Started (was: Assigned)
Mergedinto: 898950
Status: Duplicate (was: Started)

Sign in to add a comment