search

c-smile / sciter-js-sdk

Sciter.JS - Sciter but with QuickJS on board instead of my TIScript
BSD 3-Clause "New" or "Revised" License
1.64k stars 96 forks source link

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

Open gitQqqHs opened 2 years ago

gitQqqHs commented 2 years ago

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

c-smile commented 2 years ago

OS, Sciter version, graphic backend?

gitQqqHs commented 2 years ago

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

gitQqqHs commented 2 years ago

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 IAwjzi0dUm

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

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 firefox_cQT6ODl0Tt

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 2021-12-15_18-46-50

The way I want it to look 2uTlsZKJX

gitQqqHs commented 2 years ago

It should be a floating point conversion problem

gitQqqHs commented 2 years ago

OS, Sciter version, graphic backend?

Is there a solution to my problem?