Here marks the first foray into non-opninion ‘blogging’ since the relaunch. iOS 11 includes ‘Smart Invert’ that will invert most of the screen across the operating system, but allow images and videos to remain unaltered (that’s the ‘smart’ bit). By default, Safari will invert all images on a website when Smart Invert is enabled, which is a bizarre design decision. However, you can change this by adding a simple line of CSS to your website.
Here marks the first foray into non-opninion ‘blogging’ since the relaunch. iOS 11 includes ‘Smart Invert’ that will invert most of the screen across the operating system, but allow images and videos to remain unaltered (that’s the ‘smart’ bit). By default, Safari will invert all images on a website when Smart Invert is enabled, which is a bizarre design decision.
However, you can change this by adding the following CSS to your website:
@media (inverted-colors) { img, video { filter: invert(100); } }
Note that including 100 in the invert function is important for compatibility with CSS compilers such as SASS.
Originally posted at https://www.porcheron.uk/blog/ios-11-smart-invert-telling-safari-not-to-invert-images
https://www.porcheron.uk/blog/ios-11-smart-invert-telling-safari-not-to-invert-images
