Media query not working in Firefox but works in Chrome

Question

This media query code works in Chrome but is not working in Firefox Developer.

But if I open Web Tools in Firefox and add a line break anywhere in the stylesheet then it works.

 #Line_98 { fill: transparent; stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .Line_98 { overflow: visible; position: absolute; width: 600px; height: 1px; left: 0px; top: 143.5px; transform: matrix(1,0,0,1,0,0); } #Line_99 { fill: transparent; stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .Line_99 { overflow: visible; position: absolute; width: 600px; height: 1px; left: 0px; top: 195.5px; transform: matrix(1,0,0,1,0,0); } #Show_when_view_less_than_line_ { display: none; left: 46px; top: 161px; position: absolute; overflow: visible; width: 255px; height: 16px; text-align: left; font-family: Helvetica Neue; font-style: normal; font-weight: normal; font-size: 14px; color: rgba(160,160,160,1); letter-spacing: 0.5px; } /** show when less than width */ @media (max-width: 600px) { .Show_when_view_less_than_line_ { display: block !important; } } #Show_when_view_more_than_line_ { display: none; left: 46px; top: 222px; position: absolute; overflow: visible; width: 299px; height: 16px; text-align: left; font-family: Helvetica Neue; font-style: normal; font-weight: normal; font-size: 14px; color: rgba(160,160,160,1); letter-spacing: 0.5px; } /** show when more than width */ @media (min-width: 600px) { .Show_when_view_more_than_line_ { display: block !important; } }

 <div id="Responsive_Parts_VI"> <svg class="Line_98" viewBox="0 0 600 1"> <path id="Line_98" d="M 0 0 L 600 0"> </path> </svg> <svg class="Line_99" viewBox="0 0 600 1"> <path id="Line_99" d="M 0 0 L 600 0"> </path> </svg> <div id="Show_when_view_less_than_line_" class="Show_when_view_less_than_line_"> <span>Show when view less than line width</span> </div> <div id="Show_when_view_more_than_line_" class="Show_when_view_more_than_line_"> <span>Show when view more than line width</span> </div> </div>

I'm going to see if this works in the StackOverflow view.

To test resize the browser in Firefox.

Here is the full page code (you can save locally):

https://goonlinetools.com/snapshot/code/#9ioj8td2o5o6gjygd7com3

Here is the full page code here:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Media</title> <style id="applicationStylesheet" type="text/css"> .mediaViewInfo { --web-view-name: Media; --web-view-id: Media; --web-scale-on-resize: true; --web-refresh-for-changes: true; --web-enable-deep-linking: true; } :root { --web-view-ids: Media; } * { margin: 0; padding: 0; box-sizing: border-box; border: none; } #Media { position: absolute; width: 100%; height: 100%; background-color: rgba(255,255,255,1); overflow-x: hidden; overflow-y: auto; --web-view-name: Media; --web-view-id: Media; --web-scale-on-resize: true; --web-refresh-for-changes: true; --web-enable-deep-linking: true; } #Line_99 { fill: transparent; stroke: rgba(112,112,112,1); stroke-width: 1px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; } .Line_99 { overflow: visible; position: absolute; width: 600px; height: 1px; left: 0px; top: 195.5px; transform: matrix(1,0,0,1,0,0); } #Show_when_view_less_than_line_ { display: none; left: 46px; top: 161px; position: absolute; overflow: visible; width: 255px; height: 16px; text-align: left; font-family: Helvetica Neue; font-style: normal; font-weight: normal; font-size: 14px; color: rgba(160,160,160,1); letter-spacing: 0.5px; } /** show when less than width */ @media (max-width: 600px) { .Show_when_view_less_than_line_ { display: block !important; } } #Show_when_view_more_than_line_ { display: none; left: 46px; top: 222px; position: absolute; overflow: visible; width: 299px; height: 16px; text-align: left; font-family: Helvetica Neue; font-style: normal; font-weight: normal; font-size: 14px; color: rgba(160,160,160,1); letter-spacing: 0.5px; } /** show when more than width */ @media (min-width: 600px) { .Show_when_view_more_than_line_ { display: block !important; } } </style> </head> <body> <div id="Media"> <svg class="Line_99" viewBox="0 0 600 1"> <path id="Line_99" d="M 0 0 L 600 0"> </path> </svg> <div id="Show_when_view_less_than_line_" class="Show_when_view_less_than_line_"> <span>Show when view less than line width</span> </div> <div id="Show_when_view_more_than_line_" class="Show_when_view_more_than_line_"> <span>Show when view more than line width</span> </div> </div> </body> </html>

I'm using Firefox Developer 91.0b2 (64-bit) OSX

UPDATE:
The issue was on some code on my side and not the browser.

Answer 1

there is an additional css styling you need to do for firefox

 @-moz-document url-prefix() { // put your styles here }

or you can use this

 @media all and (min--moz-device-pixel-ratio:0) and (max-width: 680px){ // put your styles here }

Media query not working in Firefox but works in Chrome

Question

1 answers

solution1
0 2021-07-21 18:52:46

Media query not working in Firefox but works in Chrome

Question

1 answers

solution1 0 2021-07-21 18:52:46

solution1
0 2021-07-21 18:52:46