更快的灰度，颜色悬停为大型photoset

Question

现在我有大约2000张带灰度滤镜的图像。当我移除灰度滤镜时，不透明悬停效果几乎是瞬间完成的。然而，使用灰度，它很慢。

我想知道是否有更好的方法来实现这种效果，这对于悬停的用户体验速度会更好。

    PdfDocument pdfDoc = new PdfDocument(new PdfWriter(outputStream));
    Document doc = new Document(pdfDoc);
    PdfFont font = PdfFontFactory.createFont(FontConstants.HELVETICA);

    Table table = new Table(new float[] { 1, 1 });
    table.setProperty(Property.BORDER_BOTTOM, Border.NO_BORDER);
    table.setProperty(Property.BORDER_LEFT, Border.NO_BORDER);
    table.setProperty(Property.BORDER_RIGHT, Border.NO_BORDER);
    table.setProperty(Property.BORDER_TOP, Border.NO_BORDER);
    table.setProperty(Property.BORDER, Border.NO_BORDER);
    table.setBorder(Border.NO_BORDER);

    table.setWidthPercent(100);

    // Header
    File file = new ClassPathResource("logo.png").getFile();
    Image logo = new Image(ImageDataFactory.create(file.getPath()));

    Paragraph headerParagraph = new Paragraph();
    Text headerTitle = new Text("Title of PDF")
            .setFont(font)
            .setFontSize(20)
            .setFontColor(new DeviceRgb(0, 128, 128));
    Text headerDescription = new Text("Description")
            .setFont(font)
            .setFontSize(11);

    headerParagraph.add(headerTitle);
    headerParagraph.add(NEW_LINE);
    headerParagraph.add(headerDescription);

    table.addCell(logo);
    table.addCell(headerParagraph).setTextAlignment(TextAlignment.RIGHT);

Demo with Grayscale（注意它比下面慢得多）

Demo without Grayscale（注意它是如何快速的）

Video showing slowness

Answer 1

作为OP的codepen，如果你移动filter: gray; /* IE 6-9 */和filter: none; /* IE 6-9 */，它会在Safari中快得多，不知道为什么会发生这种情况我会稍后研究和更新，现在，这个是filter

上的safari慢度的解决方案

section#pitches > div {
  width: 6.25%;
  display: inline-block;
}
section#pitches > div > div {
  cursor: pointer;
  opacity: 0.2;
  filter: gray; /* IE 6-9 */
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%); /* Firefox 4+ */
  padding-bottom: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
section#pitches > div > div:hover {
  opacity: 0.6;
  filter: none; /* IE 6-9 */
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
}

链接到代码笔：https://codepen.io/hdl881127/pen/gRWWEm?editors=1100

似乎订单确实很重要，我发现很少有关于safari的缓慢（300-500ms延迟）的帖子谈论，在其他浏览器特定过滤器结束时filter多年来从未解决过。但是从这篇文章中，所有代码都被排序为过滤器，然后是浏览器特定规则。似乎是一个解决方案

我希望有人看到这可以对发生的事情做出明确的解释？

  

参考：http://www.inserthtml.com/2012/06/css-filters/