[Løst] Safari vil ikke vise border-radius & box-shadow riktig

jallamamba · 9. august 2012

border-radius sammen med box-shadow blir ødelagt i Safari.

Jeg har testet i Opera, IE9, Firefox og Chrome, der funker det bra, men i Safari blir det ødelagt.

Noen som har et forslag på hvordan jeg kan fikse dette?

Her er koden jeg bruker: (det er i body:after problemet ligger)

<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
  background-color: #9addfa;
  background-attachment: fixed;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding-bottom: 20px;
  position: relative;
  z-index: 1;
}
body:before {
  background-color: #6eeae0;
  width: 100%;
  height: 50%;
  box-shadow: 20px 20px 20px 40px #6eeae0;
  position: fixed;
  top: 50%;
  content: '';
  z-index: -1;
}
body:after {
  background-color: #F2E9CC;
  width: 100%;
  height: 40%;
  -moz-border-radius: 0 100% 0 0 / 0 80% 0 0;
  -webkit-border-radius: 0 100% 0 0 / 0 80% 0 0;
  border-radius: 0 100% 0 0 / 0 80% 0 0;
  box-shadow: 20px 20px 20px 40px #F2E9CC;
  position: fixed;
  bottom: 0;
  content: '';
  z-index: -1;
}
</style>
</head>
<body>
</body>
</html>

Legger med 2 bilder som viser hvordan det ser ut i Opera (venstre) og Safari (høyre)

agm · 9. august 2012

Safari har problemer med å kombinere border-radius og box-shadow. Ingen umiddelbar løsning eller enkel "hack" så vidt jeg vet, dessverre.

Edit:

Gjorde litt testing. Dette problemet oppstår når border-radius settes til 100% eller mer. Prøv å sette 99.9% istedet:

body:after {
  -moz-border-radius: 0 99.9% 0 0 / 0 80% 0 0;
  -webkit-border-radius: 0 99.9% 0 0 / 0 80% 0 0;
  border-radius: 0 99.9% 0 0 / 0 80% 0 0;
}

Endret 9. august 2012 av agm

jallamamba · 9. august 2012

Gjorde litt testing. Dette problemet oppstår når border-radius settes til 100% eller mer. Prøv å sette 99.9% istedet:
body:after {
  -moz-border-radius: 0 99.9% 0 0 / 0 80% 0 0;
  -webkit-border-radius: 0 99.9% 0 0 / 0 80% 0 0;
  border-radius: 0 99.9% 0 0 / 0 80% 0 0;
}

FANTASTISK :fun: Det funket!

Tusen takk skal du ha! :thumbs:

Logg inn

[Løst] Safari vil ikke vise border-radius & box-shadow riktig

Anbefalte innlegg

jallamamba

Lenke til kommentar

Videoannonse

agm

Lenke til kommentar

jallamamba

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer