Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2006
    Messaggi
    37

    Border shadow - radius. Bug Safari?!?

    Ho un problema davvero strano con Safari.
    In pratica non visualizza correttamente un border radius con effetto shadow, anche se tutti gli altri maggiori browser (ie9, Chrome, Firefox) non hanno problemi, ma soprattutto, lo stesso Safari visualizza perfettamente altri elementi con le stesse specifiche!!!
    Un esempio:
    http://www.beachpartyfever.com/parti...-vila-do-conde
    Come vedete, il bordo giallo presenta i due angoli blu, ed io onestamenten on riesco proprio a speigarmelo, anche perché i due riquadri sotto sono visualizzati correttamente, indi non mi pare un problema di proprietà in sé e per sé..
    Se serve, qui posto i due css:
    Per quello "malfunzionante"
    codice:
    div.articlelabel {
    	position: relative;
    	width: 80%;
    	margin: 0 auto;
    	background-color: #d8c103;
    	box-shadow: 0px 0px 10px 9px #d8c103;
    	-webkit-box-shadow: 0px 0px 10px 9px #d8c103;
    	-moz-box-shadow: 0px 0px 10px 9px #d8c103;
    	border-top-left-radius: 165px 50px;
    	border-top-right-radius: 165px 50px;
    	-webkit-border-top-left-radius: 165px 50px;
    	-webkit-border-top-right-radius: 165px 50px;
    	-moz-border-radius-topleft: 165px 50px;
    	-moz-border-radius-topright: 165px 50px;
    	text-align: center;
    }
    Ed ora quello funzionante:

    codice:
    div.articlelabel50left {
    	background-color: #d8c103;
    	position: relative;
    	margin-top: 50px;
    	width: 40%;
    	float: left;
    	margin: 0 0 0 3.5%;
    	box-shadow: 0px 0px 10px 9px #d8c103;
    	-moz-box-shadow: 0px 0px 10px 9px #d8c103;
    	border-top-left-radius: 80px 25px;
    	border-top-right-radius: 80px 25px;
    	-moz-border-radius-topleft: 80px 25px;
    	-moz-border-radius-topright: 80px 25px;
    	text-align: center;
    }
    Io davvero non riesco a capire la differenza dell'uno e dell'altro, se non le differenze in pixel, ma quelle le ho provate a modificare... Ah, l'aggiunta webkit l'ho fatta per vedere se il problema andava via, me lo faceva già da prima...
    Grazie!!!!

  2. #2
    Hai dato il valore del raggio verticale (35px) maggiore dell'altezza del div stesso (18px nel caso che ho analizzato.)

    Riduci a 17px e tutto funziona.


  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2006
    Messaggi
    37

    Esatto!!!!!

    Funziona alla grande!!!
    Non ci sarei mai arrivato, davvero grazie!!
    Mi sorge un dubbio, ma è veramente do poco esperto, come mai Chrome non dava lo stesso problema? Non è anche lui sempre basato su webkit?
    Comunque tutto è bene quel che finisce bene!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.