Open gitQqqHs opened 2 years ago
OS, Sciter version, graphic backend?
OS: windows LTSC 21H2
Sciter version: master
sciter-js-sdk-main\bin\windows\x64skia x64 x32 x32skia
Bugs show up differently
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
It should be a floating point conversion problem
OS, Sciter version, graphic backend?
Is there a solution to my problem?
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