- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Weird Positioning of Icon Font (icomoon) in Chrome on macOS (Sierra) on Retina
Hi all,
in Chrome on macOS on a retina screen we are experiencing weird positioning issues with an icon font (created via icomoon) on this site: https://ic.fsc.org (the logo).
The two logo elements are absolutely positioned inside the h1 using the pseudo elements :before and :after. Fiddeling with the font size I found out that the problem only comes up when using font-size of more than 56px. Also: as soon as the parent container is not centered (margin: 0 auto) but aligned left — no issues.
Here’s what’s happening (sorry for the big GIF)
EDIT: Deleted the inline GIF. Here’s the link to it (40+MB) https://www.dropbox.com/s/4kpvfe2ap9wd657/FSC-Logo-Bug.gif?raw=1
Any idea?
Btw: I found a similar post on the Google Chrome Support Forum: https://productforums.google.com/forum/?utm_medium=email&utm_source=footer#!msg/chrome/QUBxYBvmUVw/MVewhfEYAgAJ
Resolved. Many thanks to Rachita for pointing me to this Blog-Post at the Postman Blog from almost two years ago.
As it turns out, forcing better hardware acceleration rendering by adding -webkit-transform: translate3d(0,0,0);
to the pseudo elements solved this issue.
What’s still bugging me though: why did this issue only come up a few weeks ago, when the solution is almost two years old? Huh …