A large part of the time spent on computers are in the browser, and the browser has significant control over certain things. More so than what you can adjust in the OS. There are massive differences is between Chrome and Firefox, and the latter can be tweaked a lot. Just try opening both Chrome and Firefox, and scroll at the same speed. Firefox is the better one. People don't focus nearly enough on what happens during actual movement on the screen here. And scrolling is the biggest source of movement for most here. There is also research into how the brain processes things during movement and sudden eye movements https://www1.essex.ac.uk/psychology/overlays/2013-207.pdf Lots of things can be switched on about://flags in Chrome and about:config in Firefox. Just enter it in the address bar. And other stuff can be adjusted thru extensions. These are the major things that can be tested in browsers: 1. Chrome vs Firefox font rendering. In firefox more adjustments can be done on about:config, for example gfx.font_rendering.coretext.enabled 2. Chrome vs Firefox scrolling behavior. Just try a complex page on both by scrolling, or test automatically here: https://www.testufo.com/framerates-text 3. Disabling/enabling hardware acceleration. In Chrome this seems to make a significant difference and can be done in settings. 4. Enabling perfect smooth scrolling in firefox (massive difference) https://github.com/yokoffing/Betterfox/blob/f71368d34b87195492b3dd061723e110cdf7fac2/SmoothFox.js#L59 5. Force sRGB to disable high gammut colors. Just search for srgb in about:config 6. Adjust your sharpness, gamma, brightness etc to make patterns and font rendering look better. This can be done by monitor adjustments, thru color profiles on the OS, or by browser extensions like https://addons.mozilla.org/en-US/firefox/addon/adjust-screen-brightness/ Test on the different tools at this page: http://www.lagom.nl/lcd-test/clock_phase.php 7. Try with vsync on or off. https://www.vsynctester.com/ 8. Force a specific font on all webpages. There are large differences in how they render, and some are bitmap fonts that doesn't work well on small sizes. In Firefox this can be done by user css or with something like https://addons.mozilla.org/en-US/firefox/addon/enforce-browser-fonts/ 9. Reduce motion on or off on in the Mac accessibility options. The interface in Firefox as well as many webpages honors this setting. 10. View fps changes when testing scrolling or seeing how vsync behaves. https://addons.mozilla.org/en-US/firefox/addon/archi-fps-meter/ 11. Certain extensions can even be used to create any type of filter overlay. More or less anything can be changed. Reduced saturation, color overlays, slight blur on text, disabling color channels etc. Anything is available with a bit of tinkering. Advanced things can be done with svg filters, and later loaded thru an extension: https://svgfilters.client.io/ 12. Rendering of fonts and other things can be analyzed with zoom. However this won't necessarily pick up everything that happens when hardware acceleration is on https://addons.mozilla.org/en-US/firefox/addon/pixelzoomer/ 13. Try different framerates. Most monitors and cards use variable refresh rate to make movement smoother, but this can also be a source of eye strain. It can be experimented with thru layout.frame_rate to set a fixed one. You can test any framerate you want that your monitor supports. I guess most people won't spend the time to experiment with all these, but at least it can be done. And if enough people figure out what options and changes makes a significant difference it is fairly easy to combine them in a browser extension for easy access.

Technical details on how Firefox renders and how it interacts with the GPU can be seen here https://firefox-source-docs.mozilla.org/gfx/RenderingOverview.html

That is an interesting theory. The problem seems to follow the computer or operating system (or OS version), not the browser. On a good or bad computer, it does not matter which browser gets used. There is either dither/pwm flicker or not.

For many, yea. But there are lots of things here that can be changed that are somewhat decoupled from the OS. Even things like font rendering and color profiles can be changed to emulate what would happen on different graphics cards. A good test for someone really sensitive would be to simply the response of different things in full screen: 1. Full black color rendered in the browser 2. Gray 3. Desaturated color 4. High gamut color 5. Multiple colors 6. Small text covering the screen 7. Small text moving continously 8. Flickers between colors

Here is a small starting point if someone wants to experiment with something similar. The script is all contained in the html, so simply pasting it to ChatGPT and telling it to make certain modification should go a long way. https://codepen.io/xpd5/pen/MWZwprJ

@"async"#p30174 what does this option (gfx.font_rendering.coretext.enabled) do? I've noticed that text become narrower and a bit crispier.

@"Sentiny"#p30182 Not entirely sure, but if I remember correctly it was mentioned in a thread about bitmap fonts having issues in some version of firefox. Most pages doesn't use bitmap fonts, but I guess it would affect any font in some way or another if it moved the rendering to something else. CoreText is part of Apples APIs, so this one for example of being able to experiment with widely different ways of rendering.

@"async"#p30183 Will test it.I also tweaked text sharpening for my macos firefox a bit and this preference somehow interfere with my stable option. Need more testing. Thanks for great info.

I’ve found Firefox with the dark theme and dark mode with gfx.color_management.mode = 1 enabled to be the best for me. The default is “2”, I’m not sure what the difference is. I am also running uBlock Origin and have ambient mode disabled for YouTube. I have not been able to use Safari on Mac OS since version 13. I’m not aware of any way to customize settings in Safari like you can on Firefox. But maybe there is a way?

@"asus389"#p30226 Mode 1 applies the profile to most things instead of just tagged. I would also suggest creating the boolean string "gfx.color_management.native_srgb" and setting it to true. (Assuming that this is what your display is.)

Have you tried new Safari v17.0? I found it much better for eyes, text rendering is somehow much sharper now.

LEDStrain Forum

Loading...

Something went wrong while trying to load the full version of this site. Try hard-refreshing this page to fix the error.

How-to: Browser are the best testing ground for eye strain triggers

« Previous Page

dev