Dải màu trong Chrome

Tôi đã thử sử dụng CSS độ dốc tuyến tính để tránh sử dụng hình ảnh cho độ dốc nhưng không may là nó hiển thị kém trong Chrome với dải màu hiển thị.

Tôi đã tạo một ví dụ codepen để minh họa vấn đề.

http://codepen.io/chrism/pen/1

Thật kỳ lạ vì nó hiển thị hoàn hảo trong safari, một trình duyệt dựa trên webkit khác.

Mã CSS xuất phát từ hình ảnh la bàn, vì vậy đừng nghĩ đó là vấn đề với CSS của tôi

Tôi đã tìm thấy trong trình theo dõi vấn đề Chrome vé này, mà tôi nghĩ liên quan đến vấn đề này.

http://code.google.com.vn/p/chromium/issues/detail?id=41756

Tôi đã tự hỏi nếu có ai có bất kỳ cách giải quyết nào cho việc này không liên quan đến việc sử dụng hình ảnh?

Cảm ơn!

— Chris
nguồn

Không. Không có cách giải quyết. Đó là công cụ kết xuất của Chrome. Không có gì bạn có thể làm ngắn khi sử dụng hình ảnh hoặc chờ Google cải thiện công cụ kết xuất của họ.

— Scott

Sự khác biệt bạn đang thấy là hoà sắc. Safari phối màu gradient, Chrome thì không. Tôi không tin có một cách để kích hoạt hoặc vô hiệu hóa phối màu cho một trong hai.

Dither là một dạng nhiễu được áp dụng có chủ ý được sử dụng để ngẫu nhiên hóa lỗi lượng tử hóa, ngăn chặn các mô hình quy mô lớn như dải màu trong hình ảnh.

http://en.wikipedia.org/wiki/Dither

Thật không may, điều này có nghĩa là bạn có thể phải sử dụng hình ảnh. Nếu bạn làm quyết định sử dụng một hình ảnh lặp đi lặp lại cho một gradient, hãy chắc chắn bạn nên chừa đủ chiều rộng hoặc chiều cao cho dithering lại làm việc. Thông thường, phối màu cần khoảng 10-20 pixel để không bị lặp lại.

— Marc Edwards
nguồn

Xin chào Marc, cảm ơn câu trả lời. Vâng, tôi hiểu rằng độ dốc mượt mà hơn là do phối màu, tôi chỉ hy vọng có lẽ ai đó có thể biết một cách để 'buộc' chrome để làm mờ độ dốc bằng cách nào đó bằng CSS hoặc javascript. Tôi sẽ sử dụng một hình ảnh thay thế, nhưng hy vọng (vì nhiều lý do) không quá. Cảm ơn một lần nữa cho lời khuyên của bạn và tôi thích podcast lặp đi lặp lại của bạn!

— Chris

Vâng, thật tuyệt nếu -webkit-gradient-dither: on; tồn tại Và cảm ơn: D

— Marc Edwards

Không giống nhau, và có lẽ hiệu năng kém hơn nhiều, nhưng một kết cấu nhiễu tinh tế trên đỉnh của một gradient được vẽ CSS thì sao? Một kết cấu nhiễu nhỏ có thể được sử dụng cho tất cả các gradient của bạn. Không giống với độ dốc hoà sắc, nhưng nó có thể tốt hơn so với không phối màu?

— Marc Edwards

Thật buồn cười khi bạn nói rằng vì đó là điều đầu tiên tôi đã thử - thêm một hình ảnh nền nhiễu trong suốt lên trên ... mặc dù điều đó chắc chắn đã giúp nó không đủ để làm xáo trộn dải băng đủ ngay cả với tiếng ồn khá nặng (quá nhiều cho hiệu quả tôi muốn dù sao). Tôi muốn có hình ảnh được đăng để minh họa điều này, nhưng tôi cần thêm một vài điểm trước khi tôi được phép. Cảm ơn một lần nữa vì lời đề nghị của bạn, điều đó làm tôi vui vì tôi đã xem xét mọi con đường trước khi dùng đến một hình ảnh :)

— Chris

À được rồi Chà, thật tuyệt khi bạn đã thử nó. Tôi đã bỏ phiếu cho câu hỏi này, vì vậy hy vọng điều đó sẽ cho bạn thêm một số điểm để có thể đăng ảnh.

— Marc Edwards

Tôi nhận thấy nếu bạn kết xuất phần tử chứa gradient của bạn bằng GPU transform:translateZ(0), nó sẽ hiển thị mượt mà hơn, không hoàn hảo, nhưng mượt mà hơn.

— Sirkan
nguồn