We have started using accessibility plugin in our community Magento 2.4.5 site, which provide several aid filters such as sepia, monochrome and others. Everything worked find in desktop, but in Mobile, every time we apply any type of filter (Sepia, Monochrome, etc) the screen stretch to the left allowing to scroll back to the right and the menu become visible.
It’s a free plugin so we immediately blamed the plugin, but then we tried applying filter: sepia(1); on the body element:
<body data-container="body" id="html-body" class="cms-home cms-page-view page-layout-1column" style="filter: sepia(1);">
and again the screen stretched. Also after removing the plugin same behaviour.
Finally we used Magento 2.4 demo and applied same filter: sepia(1); on the body element in mobile device, the screen width again stretched and became scrollable.
We even tried the same on some random Magento based site Bulk. The window stretched, the menu became visible and width scrollable.
Adding image to explain better, what we observed (it doesn’t show but on the Sepia screen the horizontal scroll is visible):
When we remove the filter: sepia(1); the screen shrink again to it’s original size.
If we apply filter: sepia(1); to any other main element such as page-wrapper we did not see any impact.
Last, this doesn’t happen on Firefox. Only on Chrome and native browsers.
Any clue how we resolve such a mess?