Merge pull request #709 from rfcx/bug/CE-1004-arbimon-spectrograms-ar…

…e-pixilated-in-safari CE-1004 Fixed issue with pixelated ROI boxes in Safari browser
rfcx · Jul 22, 2021 · f49ed71 · f49ed71
2 parents 72b7e1a + dd04857
commit f49ed71
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,10 @@ Resolved issues:
 
 - CE-1160 The opacity of PM' results is decreased on the Visualizer page
 
+Resolved issues:
+
+- CE-1004 Fixed issue with pixelated ROI boxes in Safari browser
+
 ## v3.0.31 - July 14, 2021
 
 New features:

diff --git a/TEST_NOTES.md b/TEST_NOTES.md
@@ -12,6 +12,8 @@ Test Notes are used to list what pages / components / features / user flows are
   - CNN list page: all data is still shown correctly and table loads quickly
 - CE-1069 CNN job details loads quicker
   - CNN details page: all data is still shown correctly and default filter works quicker
+- CE-1004 Fixed issue with pixelated ROI boxes in Safari browser
+ - PM details page: all boxes are not pixelated in Safari browser
 - CE-1046 The synchronization to work in transactions between Arbimon and RFCx is updated
   - Projects page/Sites page: When the user creates/edits/deleted a new project/site and the issue (authentication, validation issues, etc) is happened it is not add/change the db data in the Arbimon/Core API side.
   - Test that user is still able to create / update / delete projects and create / update / delete sites.

diff --git a/assets/less/a2-components/audiodata.less b/assets/less/a2-components/audiodata.less
@@ -201,7 +201,6 @@
     }
 
     .roi-img {
-        image-rendering: -webkit-optimize-contrast;
         width:125px;
         height:125px;
         margin:2px;
@@ -211,6 +210,16 @@
         }
     }
 
+    @media screen and (-webkit-min-device-pixel-ratio:0) {
+        .roi-img {
+            image-rendering: -webkit-optimize-contrast;
+        }
+        _::-webkit-full-page-media, _:future, :root, .roi-img {
+            image-rendering: optimizeQuality; // Safari
+        }
+    }
+
+
     .roi-img-cnn {
         height: 125px;
         width: 242px; //todo, make dynamic