Currently, I am working on a responsive CSS web design project that involves incorporating various sprites for different button states.
After testing the website in Firefox, Opera, IE (compatible from IE8), Chrome, and Safari, I have ensured that everything displays correctly. The site has also been tested on various mobile phones and tablets with different browsers, all without encountering any issues.
As I am in the final stages of testing, I have had colleagues review the website on screens of different resolutions. Interestingly, a friend who uses a MacBook Pro is the only one experiencing a problem - but only when using Safari. This particular issue has proven quite challenging to pinpoint and resolve. Even after trying to replicate the problem on his screen size and adjusting Safari's settings to mimic those of other Mac users, I have had no success.
Here is a snippet of the code:
.buttons-menu .btn .rules, .buttons-menu .btn .contact , .buttons-menu .btn .tickets , .buttons-menu .btn .profile { display: block; width: 143px;height: 32.5px;padding-top: 37.5px; background-size: 100% 300%;}
.buttons-menu .btn .rules {background: url(../images/sprite-button-03.png); background-position: 0 -100%;}
The issue lies in this tester seeing approximately 2 pixels of the second part of the sprite where it shouldn't be visible, and this occurs solely in Safari.
Thank you for taking the time to read through my explanation.
EDIT : SOLUTION : After considering ralph.m's suggestion, it became evident that the problem stemmed from how Safari rounds decimals, which varies compared to other browsers.