Google Chrome recently added a tab search button to the title bar. When it was first enabled, it was possible to disable by going to chrome://flags and finding Enable Tab Search and changing it to Disabled.
A quick search of google will find multiple examples of how to disable it. Unfortunately in more recent versions of the browser, it no longer seems to be an available flag to disable.
I realized that my big issue with the drop down menu is it’s location, which Google has located on the left near the minimize button. Google has chosen to not have the traditional windows system menu on the left side of the title bar. The left side would be an ideal location for the tab management button.
In my recent GoveeBTTempLogger Project I’ve been writing SVG files as temperature graphs. I realized I could organize the color combinations with CSS Style descriptions inside the SVG instead of fully describing each element of the graphic. I am using transparent backgrounds by default, and loading the SVG files in a simple index html file like any other image.
Playing with CSS in the HTML, I came across the ability to support dark-mode. I thought that this would be really nice for when I bring up the graphs on my phone late at night, not having everything being in a bright white background.
@media screen and (prefers-color-scheme: dark) {
body {
background-color: black;
color: grey;
}
}
I added the previous block to my style in the index.html file, which overrides the default body style of background-color: white and color: black. It works nicely at the top level, but now the black lines and text in my SVG became invisible, since now they match the background.
I tried something similar in the style for my SVG and it was working great in Chrome or Microsoft Edge. But then I realized that it doesn’t work on my phone. After realizing that it wasn’t working correctly on the phone, I decided to try switching the defaults so my default used grey, and if light mode was selected it would use black. It still didn’t work! It seems that apple is paying attention to my color-scheme selection, but doing something different from any other browser.
<style>
text { font-family: sans-serif; font-size: 12px; fill: grey; }
line { stroke: grey; }
polygon { fill-opacity: 0.5; }
@media screen and (prefers-color-scheme: light) {
text { fill: black; }
line { stroke: black; }
}
</style>
I had a friend who works primarily on a Mac test to see if the problem was specific to the iPhone, or if it occurred in Safari on the desktop as well. Yes. Apple is handling my styles differently from the other browsers I tried.
Safari on MacChrome on MacFirefox on Mac
You can see my choices displaying the way I want on Chrome and Firefox, with grey lines and text on a black background, while Safari isn’t showing the grey. Am I doing something explicitly wrong in my style that Chrome and Firefox are forgiving? Or is Apple not supporting the feature properly?
The frustrating thing is that all browsers on iPhones use the Apple rendering engine. That means there’s no way I know to get the functionality I want on my phone, where the phone uses dark mode overnight, but light mode during the day.
WimsWorld 