The engine has problems with the radial-gradient and Filter: drop-shadow support for CSS

Question

The engine has problems with the radial-gradient and Filter: drop-shadow support for CSS

gitQqqHs opened this issue 3 years ago · 5 comments

When executed, the radial-gradient function creates a graph with fuzzy edges, whereas all browsers have hard edges, because hard edges are the result I need.
background: radial-gradient(at left bottom, transparent 100%, #e65893 70%);
The filter: drop-shadow function does not have any effect
filter: drop-shadow(-10px -15px 27px rgba(38, 182, 86, 0.9));
Compatibility is a serious problem

Answer 1 · 2021-12-11T21:23:40.000Z

OS, Sciter version, graphic backend?

Answer 2 · 2021-12-15T09:23:18.000Z

OS: windows LTSC 21H2
Sciter version: master
sciter-js-sdk-main\bin\windows\x64skia x64 x32 x32skia
Bugs show up differently

Answer 3 · 2021-12-15T10:32:59.000Z

OS: windows LTSC 21H2 Sciter version: master sciter-js-sdk-main\bin\windows\x64skia x64 x32 x32skia Bugs show up differently

OS, Sciter version, graphic backend?

Skia backend display effect
As you scroll through the view, the radial-gradient function becomes problematic

DirectX
The edge of the circle has a transition color and is not sharp enough

Here is my code

  <html>
<head>
    <meta charset="utf-8" />
    <title>yangmeng</title>
    <style type="text/css">
        .inner_arc {
            position: absolute;
            top: 200px;
            left: 150px;
            width: 50px;
            height: 50px;
           /* background-color:  #e65893;*/
           /*firefox*/
           /* background: radial-gradient(at left bottom, transparent 70%, #e65893 0%);  */
           /*sciter use this function belowe */
          background: radial-gradient( 0% 100%, transparent 70%, #e65893 0%);
          /*test Syntax*/
          /*  background: radial-gradient(circle at 70%, #333, #333 50%, #eee 75%, #333 75%);*/
        }


        .vertical_rect {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 1000px;
            height: 1000px;
            border-radius: 0 50px 50px 50px;
            background-color: #e65893;
            /* background: rgba(255, 0, 0, 0.3);  */
        }



        .horizontal_rect {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 200px;
            height: 200px;
            border-radius:  50px 0px 0 50px ;
            background-color: #e65893;
            /* box-shadow: 20px 40px 60px #299ee2, */
                /* 23px -20px 20px #ea80ff; */
             /* background: rgba(255, 0, 0, 0.3);  */
            /* background: radial-gradient(at left bottom, transparent 70%, #1889F6 50%); */
        }

        .shadows {
            position: relative;
            top:200px;
            left: 200px;
            width: 1200px;
            height: 1200px;
            border-radius: 0px;
            /* background-color: #d6da1e; */
               filter: drop-shadow(-10px -15px 27px rgba(38, 182, 86, 0.9));
        }

    </style>
</head>

<body>
    <div class="shadows">
        <div class="horizontal_rect"></div>
        <div class="vertical_rect"></div>
        <div class="inner_arc"></div>
    </div>
</body>

</html>

inner_arc is used to fill in right angles, because I moved the coordinates for testing purposes
top: 200px and left: 150px is right
firefox

There are also some problems with the length, width and coordinates. I need to add a pixel width
.horizontal_rect width: 201px
200px is right

The way I want it to look

Answer 4 · 2021-12-16T10:52:35.000Z

It should be a floating point conversion problem

Answer 5 · 2021-12-31T12:31:46.000Z

OS, Sciter version, graphic backend?

Is there a solution to my problem?