border-radius + overflow: ẩn khi hoạt ảnh với jQuery

Question

Kiểm tra điều này jsFiddle.

Thanh màu da cam là thanh tiến trình, trong đó giá trị nằm trong vòng tròn là thanh tiến độ cần bao nhiêu.

Bất kỳ ý tưởng nào tại sao số overflow:hidden; không được chú ý và cách giải quyết vấn đề này? Rõ ràng không có gì nên đi ra ngoài vòng tròn.

Ngoài ra còn có giải pháp tốt hơn cho điều này không?

Answer 1

position: absolute và overflow: hidden dường như không chơi độc đáo với display: table/table-cell. Loại bỏ các công cụ bảng bạn đã có trong đó để theo chiều dọc trung tâm văn bản sửa chữa vấn đề. Trong Firefox, ít nhất.

Answer 2

Tôi nghĩ rằng đó là điều trình duyệt ...

Đây là phiên bản CSS3 ...

.progressBar { 
    display: block; 
    width: 100%; 
    height: 0; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background: #ec6730; 
    transition: height 1s; 
} 

.innerContainer:hover > .progressBar { 
    height: 300px; 
} 

http://jsfiddle.net/ZyhgT/2/

Nó không còn nhấp nháy 'trình duyệt nguyên nhân xử lý công việc (không js hoạt ảnh vòng lặp ...). Nhưng nó vẫn cho thấy các cạnh trên kết thúc hoạt hình !!! Điều này có thể là những thứ của trình duyệt ... Có thể là một lỗi ...

Answer 3

Điều này không liên quan đến jQuery hoặc bất kỳ javascript nào. Trong thực tế, nếu bạn xóa tất cả javascript của bạn và thao tác chiều cao của .progressBar của bạn bằng cách sử dụng css trên li: hover, bạn sẽ thấy lỗi anyway.

Nó dường như là một vấn đề trình duyệt theo báo cáo trên: https://code.google.com/p/chromium/issues/detail?id=157218

Là một thử workaround thêm một css không thể nhận thấy chuyển đến các yếu tố mặt nạ:

.outerContainer { 
    -webkit-transform: rotate(0.000001deg); 
} 

Answer 4

Bạn chỉ cần thay đổi lớp .outerContainer của bạn và nó hoạt động tốt!

.outerContainer { 
    position: relative; 
    display: block; 
    height: 96px; 
    width: 96px; 
    overflow: hidden; 
    background: #fff; 
    border: 2px solid #fff; 

    -webkit-border-radius: 50px; 
      border-radius: 50px; 
} 

Answer 5

Đặt cấp lớp bên trong outerContainer div và tạo kiểu cho khoảng cách bên trong lớp mức tương đối. Trong JavaScript, để tính toán mức độ, chia cho 10 thay vì 100 cho hiệu ứng di chuột tròn hoàn hảo.

Đây là fiddle.

HTML

<div class="outerContainer"> 
    <div class="innerContainer"> 
     <p>Circle 3</p> 
     <span class="progressBar"></span> 
    </div> 
    <div class="level"><span>75</span> 
    </div> 
</div> 

CSS

body { 
    background: blue; 
} 

#circles { 
    text-align: center; 
    margin: 100px 0; 
} 

li { 
    display: inline-block; 
    margin: 0 10px; 
    position: relative; 
} 

.outerContainer { 
    position: relative; 
    display: block; 
    height: 96px; 
    width: 96px; 
    overflow: hidden; 
    background: #fff; 
    border: 2px solid #fff; 

    -webkit-border-radius: 50px; 
    border-radius: 50px; 
} 

.innerContainer { 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    margin: 0 auto; 
    text-align: center; 
} 

p { 
    color: #000; 
    width: 96px; 
    position: relative; 
    z-index: 2; 
} 

.progressBar { 
    display: block; 
    width: 100%; 
    height: 0; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background: #ec6730; 
} 

.level span{ 
    position:relative; 
} 

JS

$(function() { 
    $("#circles li").hover(function(){ 
     var thisElement = $(this); 
     var level = $(this).find(".level").text(); 
     var elementHeight = $(this).find(".outerContainer").height();  
     level = (level/10)*elementHeight; 

     $(thisElement).find(".progressBar").stop().animate({ 
      height: level 
     }, 300); 
    }, function() { 
     var thisElement = $(this); 

     $(".progressBar").stop().animate({ 
      height: 0 
     }, 300); 
    }); 
}); 

Answer 6

display: table không hoạt động mà wit tốt h định vị CSS;

bạn nên tránh sử dụng điều đó và tìm một số cách khác để căn giữa các nhãn của bạn.

Nếu kết nối của bạn có một chiều cao nổi tiếng, giống như mã của bạn dường như chỉ ra (height:96px ecc), sau đó chỉ cần sử dụng một vị trí cố định hàng đầu cho một absolute ly vị trí <p> yếu tố:

http://jsfiddle.net/ZyhgT/5/

Lưu ý rằng bạn thậm chí không cần jQuery cho điều này, nó là tất cả có thể đạt được với chỉ CSS3 (trừ khi bạn đang nhắm mục tiêu các trình duyệt cũ)

Answer 7

Sửa đổi fiddle của bạn một chút. Here is the link

Modifications: Changed .outerContainer css để display:block từ display:table và thêm margin-top:30px-p css

Kiểm tra nếu làm việc này cho bạn.