The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Safari gradient glitch – 1px line

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #193358

    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:

    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.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.