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

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.

    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 what does this option (gfx.font_rendering.coretext.enabled) do? I've noticed that text become narrower and a bit crispier.

      Sentiny 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 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 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.)

          a month later

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

          I haven’t tried Safari 17 yet. What system and OS did you use it on?

            asus389 Macbook Air 15 and Ventura 13.5. Tried it for few days and decided that Firefox is better anyway.

            I was in an Apple store and used safari 17 and it did seem a bit clearer than previous versions. It’s tough to say in a store though. These computers were all running the release version of Sonoma 14.0.

            5 days later

            I installed Safari 17 on Ventura 13.6 on my otherwise tolerable 2017 13 inch MBP w/o Touch Bar. It does seem more tolerable than previous Safari versions, but not quite as good as Safari 13 was on Catalina and not as good as the current Firefox is using the settings I mentioned previously. Still, I'm happy to see the improvement.

            This MBP can't run Sonoma so I can't test it with that. I did use it for a bit at the Apple Store on a Mac mini with Apple studio display and an iMac both running Sonoma and it was pretty good also. The only thing I did to improve comfort on those machines was to disable True Tone. It seemed to cause eye strain on all of the laptops running the same version of Mac OS, even with True Tone disabled - not sure why. I've had a hard time tolerating any of the ARM based Apple laptop screens, but the desktops are ok for me weirdly.

            8 months later

            Waterfox has been very friendly to me, but after recent update it went jittery and tiring. Firefox ESR is still good.

              Alyosha2001 What versions of Firefox ESR and what settings are you using? On MacOS? When I try to update higher than Firefox ESR 115.10 I start getting eye strain again. IDK why its been fine for a long time.

                asus389 Firefox ESR is up-to-date 115.11 on Windows 8.1 and it does not cause issues. I stopped Waterfox on G5.1.10. Thanks for the heads-up, I stopped Firefox automatic updater, now.

                5 months later

                Has anyone revisited this? All of the major web browsers in their current versions cause some sort of eye strain for me. I was previously able to use Firefox with some settings changed, but that no longer seems to work. I have a 13 inch MacBook Pro 2017 running Mac OS Ventura that is otherwise fine for me, it's just the browsers. All other apps don't bother my eyes?

                  dev