Gå til innhold

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

jallamamba

Anbefalte innlegg

jallamamba

jallamamba

Skrevet
Skrevet

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)

post-61117-0-00198700-1344526809_thumb.jpg

post-61117-0-96440300-1344526820_thumb.jpg

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
agm

agm

Skrevet
Skrevet (endret)

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 av agm
Lenke til kommentar
jallamamba

jallamamba

Skrevet
  • Forfatter
Skrevet

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:

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...