kenarlık yarıçapı

'u görüntülerken kayboluyor iOS'ta CSS ile görülebilen belirli bir menüyü taklit etmeye çalışıyorum. Bu, ul öğesinde menü öğelerine sahiptir ve her birini tıklatarak sayfayı sayfayı göstermek için sayfayı kaydırır. Ancak, menü kaydırıldığında (aktif olarak kayarken) köşeler kareye dönüşür. Sonra animasyon bittikten sonra tekrar yuvarlanırlar.kenarlık yarıçapı

jsfiddle, gereksiz stil kodumun bir kısmı kesildi. Listedeki başlıklardan birini tıklarsanız, içeriğin hareketli olduğu gibi köşelerin döneceğini görürsünüz. Bu, geri düğmesine bastığınızda tekrar görülebilir.

Bu sorunu en son Chrome ve Safari'de görüyorum, ancak Firefox'ta görmüyorum.

kaynak

2016-03-20 Luke Taylor

# modal-content öğesini 1'lik bir z-endeksi verebilirsiniz (1'den büyük bir z indeksinin altında hiçbir şey varsayarak) ve geçiş sırasında sınır yarıçapını korumalıdır. Geçiş .modal içeriğinin alt öğeleri .modal-içeriği "altında" hareket olduğunda, eleman yığın içinde yüksek .modal içeriğine yaparak

.modal-content { 
    position:absolute; 
    bottom:0;top:0;left:0;right:0; 
    margin: 10vh; 
    border: 1px solid #ccc; 
    border-radius: 15px; 
    overflow:hidden; 
    z-index: 1; 
}

. Yani .modal içerik sınırı geçiş yapan çocuk tarafından engellenmez.

kaynak

2016-03-20 19:40:03 ellitt

Bu neden? Detaylandırır mısın? Çalışıyor, sadece nedenini merak ediyorum. –

Öğe yığında .modal içeriği daha yüksek hale getirerek, geçiş gerçekleştiğinde .modal içeriğinin alt öğeleri "altta" .modal içerikte hareket ediyor. Yani .modal içerik sınırının geçiş yapan çocuk tarafından engellenmez. Bunun neden webkit tarayıcılarla ilgili bir sorun olduğu konusunda emin değilim. – ellitt

Ah. Bunu cevabınıza eklemek ister misiniz? O zaman kabul edeceğim. –

cevap

İlgili konular