chuyển đổi quy mô hoạt động lạ trên Safari

Question

Tôi đã tạo trang web bằng Bootstrap 3. Bootstrap 3 chứa hình tam giác phẳng làm hình chữ nhật. Nhưng các biểu tượng để phẳng vì vậy tôi căng chúng bằng lớp căng của tôi:

.stretch { 
    display: inline-block; 
    transform: scale(3,2); /* W3C */ 
    -webkit-transform: scale(3,2); /* Safari and Chrome */ 
    -moz-transform: scale(3,2); /* Firefox */ 
    -ms-transform: scale(3,2); /* IE 9 */ 
    -o-transform: scale(3,2); /* Opera */ 
} 

nó hoạt động tuyệt vời nhưng nếu tôi đang sử dụng Safari 5 biểu tượng trông lạ (xin lỗi tôi không thể tải lên một hình ảnh trực tiếp).. Các cạnh của tam giác là một mờ:

lớp của glyphicon là:

.glyphicon { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

Tôi đã cố gắng này trong lớp cơ thể:

-webkit-transform: translateZ(0px); 

tôi hy vọng bạn có thể giúp tôi, cảm ơn!

Answer 1

rộng mờ là một lỗi trong Safari: https://bugs.webkit.org/show_bug.cgi?id=27684

Để làm việc xung quanh vấn đề này, bạn có thể thử "quy mô" các glyphicon lên với font-size, và sau đó mở rộng nó xuống sử dụng transform:scale. Giảm tỷ lệ sẽ cho bạn kết quả tốt hơn.

Ngoài ra còn có glyphicon-play, đã có hình dạng bạn muốn mà không cần phải chuyển đổi. Sử dụng font-size để định kích thước, không phải transform: scale hoặc bạn sẽ gặp lại vấn đề tương tự. Nó chỉ tồn tại như một mũi tên trỏ bên phải.