CODEWITHSUNDEEP
htmlcsssafari
Jim Fahad
Jim Fahad

Reputation: 635

CSS :after and :before behave wrong on Safari 8.08

I created a logo using CSS/CSS3 for my website and that's look perfect on my windows screen. I used some ::after ::before scudo elements. Unfortunately It doesn't show correct on Apple macBook Pro, looking like this:

enter image description here

Here is the code: 

body {
background: #000
}
.logo-text > span {
color: #fff;
font-size: 20px;
font-weight: 600;
font-family:"Open Sans", sans-serif;
}
.logo-text > span {
color: #fff;
float: left;
font-family:"Open Sans", sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.5px;
line-height: 40px;
text-align: center;
width: 100%;
}
.border-main-shevron {
float: left;
height: 40px;
position: relative;
width: 210px;
}
.chevron::before {
border-color: #fff;
border-style: solid;
border-width: 2px 2px 0 0;
content:"";
display: inline-block;
height: 11px;
left: 199px;
position: absolute;
top: 0;
transform: rotate(-360deg);
vertical-align: top;
width: 11px;
}
.chevron.right::before {
height: 11px;
left: 0;
position: absolute;
top: 0;
transform: rotate(-90deg);
width: 11px;
}
.chevron.bottom::before {
height: 11px;
left: 199px;
top: 29px;
transform: rotate(90deg);
width: 11px;
}
.chevron.left::before {
height: 11px;
left: 0;
top: 29px;
transform: rotate(-180deg);
width: 11px;
}
<div class="border-main-shevron logo-text"> 
 <span>123 MAIN STREET</span>
 <span class="chevron top"></span>
 <span class="chevron right"></span>
 <span class="chevron bottom"></span>
 <span class="chevron left"></span>
</div>

Here's the JSfiddle

Upvotes: 0

Views: 277

Answers (1)

Ulrich Schwarz
Ulrich Schwarz

Reputation: 7727

It's not picking up your transform: rotate properties, you probably need the vendor-prefixed version -webkit-transform as well for this version of Safari. (caniuse thinks so, too.)

Upvotes: 2

Related Questions