Di chuột liên kết gây ra kích thước nền: bìa; để thay đổi trong Chrome

Question

Sử dụng CSS3, tôi đã đặt hình nền làm bìa. Khi tải trang đầu tiên trong Chrome và di chuột qua một liên kết, nền xung quanh văn bản thay đổi một chút (nhưng khá đáng chú ý). Tôi đang sử dụng quá trình chuyển đổi cho di chuột, nhưng sự dịch chuyển nền cũng xảy ra với quá trình chuyển đổi bị xóa.

Tôi đoán là nền đang thay đổi kích thước trong khi di chuột, nhưng tôi không chắc chắn cách giữ cho điều này xảy ra. Khi đã chuyển, bạn có thể di chuột qua các liên kết khác mà không gặp bất kỳ sự cố nào. Sau khi làm mới trang, sự cố vẫn tiếp diễn.

Website là ở đây: http://tylerbritt.com/

Styling là như vậy:

body{ 
    text-align: center; 
    margin: 0 auto; 
    color: white; 
    font: bold 80pt 'Economica', sans-serif; 

    background: url(bg2.jpg) no-repeat center center scroll; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

a { 
    color: white; 
    text-decoration: none; 
    -webkit-transition: text-shadow 0.3s ease-out; 
    -moz-transition: text-shadow 0.3s ease-out; 
    -o-transition: text-shadow 0.3s ease-out; 
    -ms-transition: text-shadow 0.3s ease-out; 
    transition: text-shadow 0.3s ease-out; 
} 

    a:hover { 
     text-shadow: 0 0 6px #1c00f6; 
    } 

vấn đề của tôi là rất tương tự như: Background shift in Google Chrome when opacity changes on hover; Lời khuyên của jfriend00 là hữu ích, nhưng vấn đề của tôi khác bởi vì nó hoàn toàn là một liên kết văn bản và không phải là một img.

Tôi đang sử dụng phiên bản Chrome 19.0.1084.52. Vấn đề không tồn tại là Safari. Mọi lời khuyên sẽ được đánh giá cao.

Answer 1

Có thể là một lỗi, tôi không biết nếu điều này sẽ làm việc nhưng cố gắng background-attachment: fixed;

Answer 2

Hey tôi đã nhận thấy vấn đề chính xác như vậy. Chắc chắn là một thứ chrome. Dưới đây là một issue tôi nộp cho dự án crom:

Chrome Version  : 21.0.1180.89 
OS Version: 6.1 (Windows 7, Windows Server 2008 R2) 
URLs (if applicable): http://jsfiddle.net/9vvy6/62/ 
         http://castlelaw-kc.fosterwebmarketing.com/ 
Other browsers tested: 
Add OK or FAIL after other browsers where you have tested this issue: 
    Safari 5/6:OK 
    Firefox 14.0.1:OK 
    IE 9:OK 
    Chrome:FAIL 

gì bước này sẽ tạo lại vấn đề?

1. Hình nền với nền-size: che
2. đè yếu tố (thử nghiệm với div và thẻ) mà có một hiệu ứng hover
3. Để có kết quả tốt nhất, sử dụng trong một cổng nhìn lớn, nơi mà các bg hình ảnh được kéo dài rất nhiều và các abbarations rõ ràng nhất là

Kết quả mong đợi là gì?

Khi sử dụng kích hoạt một hiệu ứng di chuột (như gạch dưới, thay đổi lề, vv) hình nền nên ở lại phù hợp (và thực hiện trên tất cả các trình duyệt khác thử nghiệm cho đến nay)

gì sẽ xảy ra để thay thế?

Khi hiệu ứng di chuột được kích hoạt bằng chuột, hình nền sẽ xuất hiện một cách kỳ lạ. Trong khu vực xung quanh phần tử, hình ảnh bg sẽ phát ra một vài pixel.

Vui lòng cung cấp bất kỳ thông tin bổ sung nào bên dưới. Đính kèm ảnh chụp màn hình nếu có thể .

Trong JSFiddle được liên kết ở trên, sử dụng ul/li làm ví dụ. chúng tôi xác định rằng việc thay đổi hiển thị của ul thành inline-block đã khắc phục vấn đề.

QUAN TRỌNG: Đó là siêu tinh tế, vì vậy bạn có thể phải quét chuột qua các yếu tố có liên quan một vài lần trước khi bạn nhận thấy

UserAgentString: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, như Gecko) Chrome/21.0.1180.89 Safari/537.1