在Safari中，圆形看起来很锯齿并且不是很平滑

Question

我创建了一个圆圈，一旦达到一定比例就会放大并淡出。当我在Google Chrome上打开它时，圆圈的边缘看起来完美而清晰。但是在Safari上，圆圈的边缘看起来非常糟糕并逐渐消失。我添加了＃34; webkit＆＃34;它仍然是一样的。仅仅是css动画与Safari不兼容吗？这是我的代码。

图片显示边缘在镀铬中的外观 https://gyazo.com/91a2faecb48703c4ed7e47bc3035b802

Safari中边缘的外观图片 https://gyazo.com/0507f9bb35eb2e0fd21b620d3ba44538

HTML

 #bubbles li{
              position: relative;
                list-style: none;
                display: block;
                border-radius: 100%;
              animation: fadeAndScale 15s ease-in infinite;
              -webkit-animation: fadeAndScale 15s ease-in infinite;
              -ms-animation: fadeAndScale 15s ease-in infinite;
              -moz-animation: fadeAndScale 15s ease-in infinite;
              -o-animation: fadeAndScale 15s ease-in infinite;
          }

          #bubbles li:nth-child(1){
              width: 100px;
              height: 100px;
              background-color: red;
          }
          @keyframes fadeAndScale{
              0%{
                  z-index: 100;
                  transform: scale(0)
              }
              100%{
                  z-index: 0;
                  transform: scale(50);
              }
          }
          @-webkit-keyframes fadeAndScale{
              0%{
                  z-index: 100;
                  -webkit-transform: scale(0)
              }
              100%{
                  z-index: 0;
                  -webkit-transform: scale(50);
              }
          }

CSS

 library(shiny)
library(shinyBS)
library(XLConnect)
library(lubridate)


  cData <- '
Candidate,Party,Province,Age,Gender
"L, L",NDP,Quebec,22,Female
"M, M",Bloc Quebecois,Quebec,43,Female
"M, S",Bloc Quebecois,Quebec,34,Female
"S, D",NDP,Quebec,,Female
"S, L",NDP,Quebec,72,Female
"F, H",Liberal,British Columbia,71,Female
"T, N",NDP,Quebec,70,Female
"S, J",Liberal,Ontario,68,Female
"R, Francine",NDP,Quebec,67,Female
"D, Patricia",Conservative,Ontario,66,Female
"S, Joy",Conservative,Manitoba,65,Female
"W, Alice",Conservative,British Columbia,64,Female
"O, Tilly",Conservative,New Brunswick,63,Female
"A, Diane",Conservative,Alberta,63,Female
"D, Linda",NDP,Alberta,63,Female
"B, Carolyn",Liberal,Ontario,62,Female
"N, Peggy",NDP,Ontario,61,Female
"M, Irene",NDP,Ontario,61,Female
"S, Jinny",NDP,British Columbia,60,Female
"F, Judy",Liberal,Newfoundland,60,Female
"C, Jean",NDP,British Columbia,60,Female
"D, Libby",NDP,British Columbia,59,Female
"Y, Lynne",Conservative,Saskatchewan,59,Female
"D, Anne",NDP,Quebec,58,Female
"M, Elizabeth",Green,British Columbia,58,Female
"M, Joyce",Liberal,British Columbia,58,Female
"F, Kerry",Conservative,British Columbia,57,Female
"B, Lois",Conservative,Ontario,57,Female
"B, Marj",NDP,Quebec,57,Female
"C, Joan",Conservative,Alberta,56,Female
"C, Olivia",NDP,Ontario,55,Female
"M, Cathy",Conservative,British Columbia,55,Female
"F, Diane",Conservative,Ontario,55,Female
"L, Helene",NDP,Quebec,54,Female
"G, Nina",Conservative,British Columbia,54,Female
"H, Carol",NDP,Ontario,54,Female
"P, Gail",Conservative,Prince Edward Island,53,Female
"T, Susan",Conservative,Ontario,53,Female
"Y, Wai",Conservative,British Columbia,52,Female'
con <- textConnection(cData)
cEl <- read.csv(con, header=TRUE, stringsAsFactors = FALSE)
cEl$votes <- round(runif(nrow(cEl), min=500, max=15000))
TheDataDF <- cEl


ui <- fluidPage(

   titlePanel("Archive Data Post on Stack Overflow"),
   #  Button and Alert, we use the alert to control only onetime Archive
   sidebarLayout(
      sidebarPanel(
        bsAlert("alert"),
        downloadButton("ArchiveBtn", "Archive All")
      ),

      # Show the table
      mainPanel(
        DT::dataTableOutput('TheData')
      )
   )
)


server <- function(input, output,session) {
  output$TheData <- DT::renderDataTable(DT::datatable(TheDataDF,options = list(pageLength = 25,scrollX = TRUE),
                                                              rownames = FALSE,class = 'cell-border stripe')
                                                            %>% formatStyle(c(2:ncol(TheDataDF)),
                                                              color = styleInterval(55, c('red', 'black'))))

  output$ArchiveBtn <- downloadHandler(
      filename = function() { 
      paste("ArchiveData-", ymd(Sys.Date()), ".xlsx", sep="")
    },
    content = function(file) {
            fname <- paste(file,"xlsx",sep=".")
            wb <- loadWorkbook(fname, create = TRUE)
            #creating sheets within the Excel workbook
            createSheet(wb, name = "The Arc Data")
            #writing into sheet within the Excel workbook : 
            writeWorksheet(wb, TheDataDF, sheet = "The Arc Data", startRow = 1, startCol = 1)
            saveWorkbook(wb)
            file.rename(fname,file)
      # Create the message for the complition of the archive
      createAlert(session, "alert", "exampleAlert", style="success",title = "Archive Complete!",
                        content = "Data archived", append = FALSE)

    }

  )

  }

# Run the application 
shinyApp(ui = ui, server = server)

Answer 1

我会使用圆点svg图像，然后继续使用css为缩放设置动画。

编辑：这就是该网站接近它的方式......

.indiez-fow-bg-wrapper {
  background: -webkit-linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%);
  background: linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 0;
  top: 0;
  left: 0;
  position: absolute;
}

@media (max-width: 600px) {}

.indiez-fow-bg-wrapper>div {
  will-change: transform;
  width: 800px;
  height: 800px;
  position: absolute;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  margin-top: -250px;
  margin-left: -250px;
}

.indiez-fow-bg-wrapper>div:not(._touch) {
  border-radius: 50%;
}

@media (max-width: 600px) {
  .indiez-fow-bg-wrapper>div {
    width: 300px;
    height: 300px;
    margin-top: -150px;
    margin-left: -150px;
  }
}

.indiez-fow-bg-wrapper._animate .__violet {
  left: 25%;
  top: 15%;
}

.indiez-fow-bg-wrapper._animate .__violet._touch {
  left: auto;
  right: -10%;
  top: 5%;
  -webkit-animation: scaleUp 16s linear forwards;
  animation: scaleUp 16s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__violet:not(._touch) {
  background: -webkit-linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
  background: linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
  -webkit-animation: scaleUp 20s linear forwards;
  animation: scaleUp 20s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__red {
  top: 25%;
  right: 5%;
  -webkit-animation: scaleUp 20s 4.5s linear forwards;
  animation: scaleUp 20s 4.5s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__red:not(._touch) {
  background: -webkit-linear-gradient(45deg, #F14545 0%, #E7219B 100%);
  background: linear-gradient(45deg, #F14545 0%, #E7219B 100%);
}

.indiez-fow-bg-wrapper._animate .__red._touch {
  right: auto;
  left: 25%;
  top: 30%;
  -webkit-animation: scaleUp 16s 3s linear forwards;
  animation: scaleUp 16s 3s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__mint {
  top: 200px;
  left: 20%;
  -webkit-animation: scaleUp 20s 9s linear forwards;
  animation: scaleUp 20s 9s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__mint:not(._touch) {
  background: -webkit-linear-gradient(45deg, #01C961 0%, #00FFA2 100%);
  background: linear-gradient(45deg, #01C961 0%, #00FFA2 100%);
}

.indiez-fow-bg-wrapper._animate .__mint._touch {
  -webkit-animation: scaleUp 16s 6s linear forwards;
  animation: scaleUp 16s 6s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__sunflower {
  bottom: 0px;
  right: 100px;
  -webkit-animation: scaleUp 20s 13.5s linear forwards;
  animation: scaleUp 20s 13.5s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__sunflower:not(._touch) {
  background: -webkit-linear-gradient(45deg, #FFB100 0%, #FFE938 100%);
  background: linear-gradient(45deg, #FFB100 0%, #FFE938 100%);
}

.indiez-fow-bg-wrapper._animate .__sunflower._touch {
  -webkit-animation: scaleUp 16s 9s linear forwards;
  animation: scaleUp 16s 9s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__purple {
  top: 300px;
  left: 10%;
  -webkit-animation: scaleUp 20s 18s linear forwards;
  animation: scaleUp 20s 18s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__purple:not(._touch) {
  background: -webkit-linear-gradient(45deg, #FF519F 0%, #BE42FF 100%);
  background: linear-gradient(45deg, #FF519F 0%, #BE42FF 100%);
}

.indiez-fow-bg-wrapper._animate .__purple._touch {
  -webkit-animation: scaleUp 16s 12s linear forwards;
  animation: scaleUp 16s 12s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__royal-blue {
  top: 10%;
  right: 10%;
  -webkit-animation: scaleUp 20s 22.5s linear forwards;
  animation: scaleUp 20s 22.5s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__royal-blue:not(._touch) {
  background: -webkit-linear-gradient(45deg, #2500DA 0%, #009BFF 100%);
  background: linear-gradient(45deg, #2500DA 0%, #009BFF 100%);
}

.indiez-fow-bg-wrapper._animate .__royal-blue._touch {
  -webkit-animation: scaleUp 16s 15s linear forwards;
  animation: scaleUp 16s 15s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__orange {
  bottom: 0;
  left: 100px;
  -webkit-animation: scaleUp 20s 27s linear forwards;
  animation: scaleUp 20s 27s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__orange:not(._touch) {
  background: -webkit-linear-gradient(45deg, #FF4040 0%, #FF9A3D 100%);
  background: linear-gradient(45deg, #FF4040 0%, #FF9A3D 100%);
}

.indiez-fow-bg-wrapper._animate .__orange._touch {
  -webkit-animation: scaleUp 16s 18s linear forwards;
  animation: scaleUp 16s 18s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__lime {
  top: 25%;
  right: 200px;
  -webkit-animation: scaleUp 20s 31.5s linear forwards;
  animation: scaleUp 20s 31.5s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__lime:not(._touch) {
  background: -webkit-linear-gradient(45deg, #79E200 0%, #B2951B 100%);
  background: linear-gradient(45deg, #79E200 0%, #B2951B 100%);
}

.indiez-fow-bg-wrapper._animate .__lime._touch {
  -webkit-animation: scaleUp 16s 21s linear forwards;
  animation: scaleUp 16s 21s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__aqua {
  top: 25%;
  left: 15%;
  -webkit-animation: scaleUp 20s 36s linear forwards;
  animation: scaleUp 20s 36s linear forwards;
}

.indiez-fow-bg-wrapper._animate .__aqua:not(._touch) {
  background: -webkit-linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%);
  background: linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%);
}

.indiez-fow-bg-wrapper._animate .__aqua._touch {
  -webkit-animation: scaleUp 16s 12s linear forwards;
  animation: scaleUp 16s 12s linear forwards;
}

@-webkit-keyframes scaleUp {
  60% {
    -webkit-transform: scale(5);
    transform: scale(5);
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}

@keyframes scaleUp {
  60% {
    -webkit-transform: scale(5);
    transform: scale(5);
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}

<div class="indiez-fow-bg-wrapper  _animate">
  <div class="__violet ">

  </div>
  <div class="__red ">

  </div>
  <div class="__mint ">

  </div>
  <div class="__sunflower ">

  </div>
  <div class="__purple ">

  </div>
  <div class="__royal-blue ">

  </div>
  <div class="__orange ">

  </div>
  <div class="__lime ">

  </div>
  <div class="__aqua ">

  </div>
</div>