diff --git a/ui/index.html b/ui/index.html
index 0bf90733..f7dcf114 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -237,7 +237,7 @@
                             <option value="png">png</option>
                             <option value="webp">webp</option>
                         </select>
-                        <span id="output_lossless_container">
+                        <span id="output_lossless_container" class="displayNone">
                             <input id="output_lossless" name="output_lossless" type="checkbox"><label for="output_lossless">Lossless</label></td></tr>
                         </span>
                     </td></tr>
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index e254956b..49707f59 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -1557,19 +1557,19 @@ updateOutputQuality()
 
 function updateOutputQualityVisibility() {
     if (outputFormatField.value === 'webp') {
-        outputLosslessContainer.style.display = 'unset'
+        outputLosslessContainer.classList.remove('displayNone')
         if (outputLosslessField.checked) {
-            outputQualityRow.style.display='none'
+            outputQualityRow.classList.add('displayNone')
         } else {
-            outputQualityRow.style.display='table-row'
+            outputQualityRow.classList.remove('displayNone')
         }
     }
     else if (outputFormatField.value === 'png') {
-        outputQualityRow.style.display='none'
-        outputLosslessContainer.style.display = 'none'
+        outputQualityRow.classList.add('displayNone')
+        outputLosslessContainer.classList.add('displayNone')
     } else {
-        outputQualityRow.style.display='table-row'
-        outputLosslessContainer.style.display = 'none'
+        outputQualityRow.classList.remove('displayNone')
+        outputLosslessContainer.classList.add('displayNone')
     }
 }