I've got a full width section of a site that is the same colour of the logo. So I have used background-attatchment: fixed to keep a second 'faux' (as in its just for the design) logo over the top of the regular logo that exists on the whole site.
This works as expected over all the browsers I need it too. However I jumped on an old MBP the other day that Chrome hadn't updated on for a while and noticed the logo to be out of alignment by 20px exactly.
Ive recreated it in code pen thinking it was probably some padding/margin issue with my layout but even in the super stripped back version the problem still exists.
Up to date chrome: correctly aligned logos chrome v50: Issue cause by older versions of chrome
https://codepen.io/jaketh9000/pen/wEYWpB
background-position: calc(100vw - 185px) 20px;
My first instinct was that it would be the slightly strange way i've got the background position to align to the right. But even when I just use a straight forward px value, the same issue persists.
Any ideas would be greatly appreciated.
Cheers.
For Chrome version 26.0 and below, use the
-webkit-calc.