currentColor dường như bị "kẹt" trong Safari

Question

Tôi đang cố gắng sử dụng CSS currentColor làm màu đường viền để tạo hình tam giác CSS bằng cách sử dụng: sau nội dung. Điều này làm việc tốt trong tất cả các trình duyệt tôi đã thử, ngoại trừ một: Safari có vẻ là bộ nhớ đệm hiện tạiColor từ tam giác đầu tiên nó tạo ra, và sau đó sử dụng ở khắp mọi nơi.

Đây là những gì tôi nhìn thấy - hành vi dự kiến ​​từ Chrome (và Firefox, và IE9 +):

hành vi sai từ Safari 8.0.4 trên Yosemite 10.10.2 (giống trên iOS 8.2) - nhận thấy cả ba hình tam giác có màu đỏ, không phải là currentColor các yếu tố của họ:

Dưới đây là a fiddle with the full code chứng minh vấn đề. CSS liên quan:

span { 
    display: inline-block; 
    border-bottom: 2px solid currentColor; 
} 

span::after { 
    /* Generate a triangle (based on Foundation's css-triangle mixin) */ 
    content:""; 
    display: inline-block; 
    width: 0; 
    height: 0; 
    border: inset 0.4em; 
    /* Safari seems to cache this currentColor... */ 
    border-color: currentColor transparent transparent transparent; 
    border-top-style: solid; 
} 

.red { color: #c00; } 
.blue { color: #009; } 

HTML rất đơn giản:

<div> 
    <span class="red">Red</span> 
    <span>Default</span> 
    <span class="blue">Blue</span> 
</div> 

Đây có phải là một lỗi trong Safari? Vấn đề giải thích về đặc tả CSS?

Quan trọng hơn, mọi đề xuất để giải quyết vấn đề này? Tôi ghét phải khai báo rõ ràng màu sắc riêng biệt: sau các quy tắc cho từng phần tử. (Sử dụng currentColor thực sự đơn giản hóa việc bảo trì như các thay đổi CSS khác của chúng tôi.)

Answer 1

Vì vậy, điều này hóa ra là actual Safari bug (có thể được khắc phục sớm).

Tôi có thể làm việc xung quanh nó bằng cách sử dụng this suggestion rằng màu đường viền mặc định là currentColor. Thay thế này:

border-color: currentColor transparent transparent transparent; 

với thuộc tính mở rộng mà tránh nhắc đến currentColor:

/* border-top-color: currentColor; is the default behavior */ 
    border-right-color: transparent; 
    border-bottom-color: transparent; 
    border-left-color: transparent; 

và vấn đề đi xa trong Safari (và nó vẫn hoạt động trong các trình duyệt khác).

Answer 2

Ngay cả khi tôi gặp phải vấn đề tương tự, vì vậy tôi phải đi với một mẹo nhỏ js.

Với mẹo này, chúng tôi có thể sử dụng thuộc tính currentColor để đặt chính xác trong các phần tử mong muốn. nhưng chỉ có thể đạt được đối với các yếu tố thông thường. vì vậy tôi đã chuyển các phần tử giả thành các phần tử bình thường.

Bạn phải buộc safari vẽ lại các phần tử để đạt được điều này. Để đạt được các yếu tố vẽ lại, chỉ cần ẩn và hiển thị nó.

var nodeStack =[element]; 
while (node = nodeStack.pop()) { 
    if (node.nodeType == 1) { 
     node.style.display="none"; 
     node.style.display=""; 
     var i = node.childNodes.length; 
     while (i--) { 
      nodeStack.push(node.childNodes[i]); 
     } 
    } 
} 

Kiểm tra này simple codepen(Mã của bạn với sửa đổi ít)

và cũng read this for brief info

yếu tố giả không thể đạt được qua thủ thuật này. Bạn phải di chuyển nó vào một khoảng hoặc một số yếu tố khác.