Issue Description:
I am encountering an issue with a custom CSS for a Shopify theme (Dawn), specifically with a flexbox layout not rendering correctly in Firefox on mobile devices, while it works as expected in other browsers (including mobile Brave and Chrome, and Chrome and Firefox desktop browsers with mobile emulation).
Details:
Theme: Shopify Dawn
Customization: Added custom CSS to base.css for displaying items in a collection in a grid layout using flexbox.
Problem: The custom CSS works correctly in most browsers, but in Firefox/Tor/Safari browsers on mobile, the flexbox styling does not render, leading to a broken layout.
Relevant CSS:
/* Custom CSS for Displaying Full paintings on Collection page in GRID - from here to the end */.painting-grid { display: flex; flex-direction: column; /* Stack rows vertically */ align-items: center; /* Center rows horizontally */ padding-bottom: 50px; /* Added padding to the bottom of the grid */ box-sizing: border-box;}.painting-row { display: flex; justify-content: center; width: 100%; margin-bottom: -10px; /* Adjust this value to control the spacing between rows */ padding: 0;}.scale img { width: 100%; /* Image will scale to fit its container */ height: auto; /* Maintain the image's aspect ratio */ transition: transform 0.3s ease-in-out; /* This will smooth the zoom effect */}.scale:hover img { transform: scale(1.25); /* This will zoom the image to 125% of its original size on hover */ box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); /* Shadow effect */}.scale { max-width: 150px; /* Set the maximum width for the container */ width: 100%; /* This ensures the container takes up the full width available to it, up to the max-width */ margin: 3px; /* Adjust this value to control the spacing between columns */ text-align: center; position: relative; /* This is necessary for the absolute positioning of the label to work */ z-index: 0; /* Default stack order */}.scale:hover { z-index: 10; /* Higher stack order when hovered */}/* Adjust the width of the scales based on the number of columns */.painting-grid[data-columns="4"] .scale { flex: 1 0 calc(25% - 10px);}.painting-grid[data-columns="5"] .scale { flex: 1 0 calc(20% - 10px);}.painting-grid[data-columns="6"] .scale { flex: 1 0 calc(16.67% - 10px);}.painting-grid[data-columns="7"] .scale { flex: 1 0 calc(14.29% - 10px);}.position-label { display: none; /* Hide the label by default */ position: absolute; bottom: 10px; /* Adjust this to position the label from the bottom of the image */ left: 50%; transform: translateX(-50%); /* This will center the label */ color: white; font-size: 22px; /* Adjusted font size */ font-weight: semi-bold; /* Bolder font */ background-color: rgba(0, 0, 0, 0.33); /* Optional: Adds a semi-transparent background for better readability */ padding: 0px 8px; /* Optional: Adds some padding around the label */ border-radius: 1px; /* Optional: Rounds the corners of the label's background */ z-index: 1; /* Ensure the label appears above the image */}.scale:hover .position-label { display: block; /* Show the label when the scale is hovered */}/* End of Custom CSS for Displaying Full paintings on Collection page in GRID */Observations:
In browsers where the layout works, the inspector shows a "flex" label next to . In Firefox on mobile, this label is absent, suggesting that the flexbox properties are not being applied. (I used firefox nightly in dev mode with remote debugging mode set up on my pc to inspect)
Question:
What could be causing this specific issue with Firefox on mobile, and how can I resolve it? Are there any known compatibility issues with flexbox in mobile Firefox, or could there be something specific in my CSS or HTML causing this problem?
Attempts to Fix:
Checked and confirmed that the tag is correctly set.Ensured no syntax errors in the CSS.Disabled a potentially conflicting app (Scrollio) without resolving the issue.Investigated possible quirks mode issues - inconclusive. declaration is set, but inspector still shows a possible quirks mode conflict.