Basically I have a few buttons on a page and noticed in Safari I was getting a vertical 1px line through one of the buttons. The mark-up was identical for all the buttons, with the exception of the text which obviously alters the width of each. I’ve since realised that if you resize your browser (Safari) window you can see this issue effect each button.
I’ve created a Codepen for this issue here: http://codepen.io/moy/pen/dPvjdW
At each end of the button I have a horizontal gradient running from a darker colour to transparent, this is achieved using the span :before and :after pseudo classes – and a percentage width is set as the width of the buttons can alter depending on what text is within it. Also the background colour can change, which is why I’ve overlayed the ‘shadow’ and ‘light’ effect this way. This isn’t an issue in any other browser, just Safari.
Can anyone help me with this, it’s really annoying!
Thanks in advance.
