UPDATE: I have narrowed down the issue to two SVG images that can be found here: . Strangely, Chrome on Android is displaying the second SVG image underneath the first. Take a look at this screenshot of the incorrect rendering on the Chrome browser for Android: https://i.sstatic.net/dTVoe.jpg
The page loads correctly on other browsers though, as shown in this screenshot: https://i.sstatic.net/jHjrh.jpg
On my HTML page, there is a grid of SVG squares each measuring 50x50px.
This setup works flawlessly everywhere I've tested it (refer to the screenshots below), except for when using Chrome on Android. Interestingly, when testing on Desktop Chrome with the Devices Toolbar open in Inspector, the problem doesn't occur.
The issue started occurring only recently (around 1 month ago) on my Android Chrome browser.
- Page URL:
- Android version: 13
- Android Chrome version: 114.0.5735.130
Refer to the code snippets below the screenshots for more information.
Functioning well in desktop Chrome Inspector, similar to how it appears on Brave browser for Android (and previously on Android Chrome):
https://i.sstatic.net/AN88M.jpg
Disordered SVG images observed in Chrome for Android, causing issues with page width as well:
https://i.sstatic.net/tiQhy.jpg
Essential CSS:
:root {
--width: 500px;
--height: 600px;
}
* {
margin: 0;
padding: 0;
}
body {
width: 600px;
margin: auto;
}
#maze {
border: 2px solid #037C73;
border-radius: 2px;
width: var(--width);
height: var(--height);
margin: auto;
padding: 0;
}
.rows {
height: 50px;
}
Relevant SVG:
<svg
width="50"
height="50"
viewBox="0 0 5.2916665 5.2916668"
</svg>