Elements with gradient background and border don't render properly
Reported by
1der1...@gmail.com,
Nov 18 2017
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36 Example URL: https://1der1.com/pages/update#_content Steps to reproduce the problem: 1. Open the Summernote editor on the 1der1 website builder page. 2. Click the "Ordered List" button 3. Insert with Gradient and Border settings. 3. You can see the buggy rendering. What is the expected behavior? The background gradient should be behind the element, including the borders. What went wrong? Upper and lower borders are OK but left and right borders show the background color without gradient and switched colors as well. This is an example HTML code, created by the 1der1 website builder: <ul style="padding: 11px;border: 33px dotted #8a2be2;background-image: linear-gradient(90deg, #16a085 25%, #f4d03f 75%);"> <li><br></li> </ul> The attached file shows the screenshot with this code. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? Yes Chrome version: 62.0.3202.94 Channel: stable OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version:
,
Nov 20 2017
,
Nov 20 2017
,
Nov 20 2017
The gradient is repeating, as it should, using background-origin: padding-box, as it should. To get the behavior you want, specify background-origin: border-box.
,
Nov 22 2017
Our1der1 website builder adds now automatically "background-origin: border-box" if a user chooses background image/gradient and border as well. Thank you. |
||||
►
Sign in to add a comment |
||||
Comment 1 by junov@chromium.org
, Nov 20 2017Components: -Blink Blink>Paint
Status: Available (was: Unconfirmed)