Created
April 17, 2013 23:27
-
-
Save tarngerine/5408606 to your computer and use it in GitHub Desktop.
Hack to fix inter-browser saturated color display
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* force hardware acceleration to always be on. stick this div in the HTML wherever */ | |
| .force-hardware-acceleration { | |
| -webkit-transform: translate3d(0, 0, 0); | |
| } | |
| /* forcing hardware acceleration on makes safari freak out and render fonts as antialiased instead of the default subpixel-antialiased */ | |
| body { | |
| -webkit-font-smoothing: subpixel-antialiased; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Stick this somewhere, and have this CSS somewhere in your base template so it renders on every page --> | |
| <div class="force-hardware-acceleration"></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Recently found that while using colors (especially noticeable with bright colors), the colors became SUPER saturated while CSS animations were running AND in Safari and Firefox:
Top: super saturated version
Bottom: intended color
I guessed that the hardware acceleration from the CSS animations was causing Chrome to saturate the colors, but in Safari and Firefox they were saturated regardless of animation presence.
The following is a hack that forces hardware acceleration on with a stub div, and a 'counter-hack' that fixes Safari turning all font-smoothing to antialiased when hardware rendering is on.