Chuyển đổi CSS3 làm rối tung phông chữ trong webkit?

Question

Kể từ khi tôi thêm vào một quá trình chuyển đổi css (đầu tiên là trên di chuột, thứ hai là một hình ảnh động) có vẻ như đã làm sai lệch phông chữ của tôi, chúng trông 'khác biệt'.

Hoàn toàn kỳ quái, tôi đã tìm kiếm hàng giờ và không thể tìm thấy bất kỳ thứ gì trên đó, cũng như tôi có thể tìm ra chính xác tại sao nó xảy ra.

Dường như có vẻ ổn trong firefox, nhưng safari và chrome đang gặp sự cố.

http://www.simplerweb.co.uk

Tất cả mọi thứ dưới hoạt hình bánh răng ở góc dưới bên trái dường như trông giống như một trọng lượng nhẹ hơn và phông chữ menu điều hướng dường như giống nhau.

Tôi hoàn toàn bị mất trên trang này.

Đây là CSS cho hoạt ảnh.

.gearone {height:100px; 
width:100px; 
top:-10px; 
left:-10px; 
position:absolute; 
background-position:center; 
background-repeat:no-repeat; 
background-image:url(../images/gearone.png); 
-webkit-animation-name:    backrotate; 
    -webkit-animation-duration:  13s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transition-timing-function:linear; 


-moz-animation-name: backrotate; 
    -moz-animation-duration: 13s; 
     -moz-animation-timing-function: linear; 
    -moz-animation-iteration-count: infinite; 
} 

.geartwo {height:100px; 
width:100px; 
position:absolute; 
background-position:center; 
background-repeat:no-repeat; 
background-image:url(../images/gearone.png); 
top:20px; 
left:10px; 

-webkit-animation-name:    rotate; 
    -webkit-animation-duration:   13s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transition-timing-function:linear; 


    -moz-animation-name: rotate; 
    -moz-animation-duration: 13s; 
     -moz-animation-timing-function:linear; 
    -moz-animation-iteration-count: infinite; 

} 


@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotate(0deg); 

    } 
    to { 
    -webkit-transform: rotate(360deg); 

    } 
} 

@-moz-keyframes rotate { 
from { 

    -moz-transform: rotate(0deg); 
    } 
    to { 

    -moz-transform: rotate(360deg); 
    } 
} 



@-webkit-keyframes backrotate { 
    0% { 

     -webkit-transform: rotate(360deg); 
    } 
    100% { 

     -webkit-transform: rotate(0deg); 
    } 
} 
@-moz-keyframes backrotate { 
    0% { 
     -moz-transform: rotate(360deg); 

    } 
    100% { 
     -moz-transform: rotate(0deg); 

    } 
} 

Answer 1

Những gì bạn thấy là webkit chống bí danh văn bản của bạn bởi vì nó xử lý văn bản dưới dạng kết cấu trái với vectơ. Bạn không thể làm gì nhiều, ngoài việc không sử dụng phép biến đổi hoặc sử dụng thay thế văn bản để cung cấp hình ảnh thay vì loại của bạn.

Có một few related threads liên quan đến bí danh webkit, nhưng cá nhân tôi không có nhiều may mắn khi giữ kiểu như kiểu và vẫn đang sử dụng phép biến đổi.

Answer 2

Tôi không chắc chắn chính xác lý do tại sao nó đang xảy ra, nhưng có vẻ như khi .geartwo phần tử của bạn (100px x 100px) chồng chéo văn bản của bạn, có vẻ như để làm sáng nó. Khi nó lăn ra khỏi nó, nó trở lại bình thường. Tôi cũng vậy, hãy chú ý điều này chỉ trong các trình duyệt webkit.

Để khắc phục, bạn có thể đặt bánh răng width và height thành 40px (đó là kích thước của hình ảnh - Tôi không thấy cần phải có kích thước 100px x 100px) và sau đó định vị lại cho phù hợp.

EDIT: Tôi không chắc chắn rằng bạn cần thực hiện điều này sau khi đưa ra đề xuất của mình, nhưng tôi đã tìm thấy this related discussion sau một chút tìm kiếm.

Answer 3

tôi có cùng một vấn đề. wile việc thực hiện một quá trình chuyển đổi webkit một số văn bản neo đã trở thành antialiased. sau nhiều lần thử tôi đã thấy rằng điều này xảy ra chỉ trong các phần tử được định vị và có chỉ mục z với các phần tử khác được định vị quá và với chỉ mục z.

#footer { 
    bottom: 0; 
    left: 330px; 
    right: 100px; 
    height: 75px; 
    background-color: #231f20; 
    min-width: 540px; 
    min-height: 75px; 
    position: fixed; 
    z-index: 10; 
} 

bên chân tôi có

#cityNav > ul > li a { 
      font-size: 24px; 
      text-transform: uppercase; 
      position: relative; 
      z-index: 110; 
      line-height: 24px; 
      height: 24px; 
      display: block; 
     } 

và đây là quá trình chuyển đổi của tôi

.circle { 
     position: absolute; 
     top: 0; 
     left: 0; 
     display: block; 
     background-color: #ff0000; 
     width: 20px; 
     height: 20px; 
     cursor: pointer; 
     text-indent: -999em; 
     -webkit-border-radius: 50%; 
     -moz-border-radius: 50%; 
     -o-border-radius: 50%; 
     border-radius: 50%; 
     -webkit-transition: all .2s ease-out; 
     -moz-transition: all .2s ease-out; 
     -o-transition: all .2s ease-out; 
     transition: all .2s ease-out; 
    } 
    .circle:hover { 
     -webkit-transform: scale(2); 
     -moz-transform: scale(2); 
     -o-transform: scale(2); 
     transform: scale(2); 
    } 

Answer 4

Tôi nghĩ rằng tôi đã có một vấn đề tương tự, và những gì cố định nó cho tôi được thêm

-webkit-font-smoothing: antialiased; 

vào css cơ thể của tôi. Khi hoạt ảnh của bất kỳ loại nào xảy ra, webkit cố gắng chống răng cưa văn bản để trợ giúp cho hoạt ảnh, vì vậy hãy thêm nó để bắt đầu ngăn không cho nó thay đổi hoặc trông khác.

Answer 5

tôi đã phải đối mặt với vấn đề này nhiều lần và đã thành công thêm css sau vào yếu tố hoạt hình:

z-index: 60000; 
position: relative; 

Có vẻ như nó cần cả z-index và vị trí để có hiệu quả. Trong trường hợp của tôi, tôi đã sử dụng nó với các trình quay phim hoạt hình của Font Awesome.

Answer 6

Như đã nêu ở trên, -webkit-font-smoothing: antialiased; hoạt động trên Safari trên máy tính để bàn. Nhưng trên iOS, bạn cần sử dụng -webkit-backface-visibility: hidden; để khắc phục điều này.

Answer 7

Tôi gặp sự cố này trong Chrome dành cho OSX. Sử dụng -webkit-backface-visibility: hidden; đã khắc phục sự cố.

Answer 8

Đối iOS8, cách duy nhất tôi đã thành công trong việc loại bỏ các chuyển đổi thấp thoáng là bằng cách thêm

body * { -webkit-transform: translate3d(0, 0, 0); }

để stylesheet của tôi.

Answer 9

Tất cả bạn cần làm là thêm quy tắc CSS này cho bất kỳ yếu tố mà bạn đang nhìn thấy nhấp nháy trên:

-webkit-transform-style: preserve-3d; 

Và đó là nó.

Answer 10

Trong khi -webkit-backface-visibility: hidden; là giải pháp một phần; nó thực sự làm hỏng hiển thị văn bản của bạn, đặc biệt nếu bạn đã làm mịn/bật AA. Lỗi này cũng khó chịu, bởi vì nó chỉ xảy ra khi bạn đang sử dụng thuộc tính biến đổi.

Sau khoảng 2 năm không thường xuyên truy cập chủ đề này mỗi tháng khác, tôi đã tìm thấy bản sửa lỗi. Bạn cần thêm position:relative vào phần tử css đang được làm động. Mặc dù vậy, bắt buộc phải có , bạn cần đặt giá trị đó là z-index giá trị lớn hơn hoặc thấp hơn thì phần tử mà bạn thấy biến dạng trên. Điều này sửa chữa nó 100%.

Vì chủ đề không có câu trả lời 'xác định', tôi hy vọng câu trả lời này sẽ giúp một người ở cùng một chiếc thuyền mà tôi đã ở trong nhiều năm.