diff --git a/src/app/modules/data/detail/data-detail-content.scss b/src/app/modules/data/detail/data-detail-content.scss
index d611fd86..719e893d 100644
--- a/src/app/modules/data/detail/data-detail-content.scss
+++ b/src/app/modules/data/detail/data-detail-content.scss
@@ -12,6 +12,7 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see .
*/
+@import "src/theme/util/_mixins.scss";
:host ::ng-deep {
ion-slides.work-locations {
@@ -52,7 +53,7 @@
& > * {
display: block;
- border-radius: var(--border-radius-default);
+ @include border-radius-in-parallax(var(--border-radius-default));
overflow: hidden;
position: relative;
top: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
diff --git a/src/app/modules/data/list/data-list-item.scss b/src/app/modules/data/list/data-list-item.scss
index 42c6bc34..bd872da7 100644
--- a/src/app/modules/data/list/data-list-item.scss
+++ b/src/app/modules/data/list/data-list-item.scss
@@ -1,6 +1,22 @@
+/*!
+ * Copyright (C) 2022 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see .
+ */
+@import "src/theme/util/_mixins.scss";
+
ion-item {
--border-color: transparent;
- border-radius: var(--border-radius-default);
+ @include border-radius-in-parallax(var(--border-radius-default));
overflow: hidden;
--inner-padding-end: 0;
diff --git a/src/theme/util/_mixins.scss b/src/theme/util/_mixins.scss
index d10de18f..4c791f05 100644
--- a/src/theme/util/_mixins.scss
+++ b/src/theme/util/_mixins.scss
@@ -77,3 +77,11 @@
// but also ensure items get shrunk on small screens
grid-template-columns: repeat(auto-fit, minmax(calc(min($item-width, 100%)), 1fr))
}
+
+@mixin border-radius-in-parallax($border-radius) {
+ border-radius: $border-radius;
+ // explicitly place element in 3D space
+ // Safari seems to sometimes get confused
+ // and disregard border radius in some cases
+ transform: translateZ(0);
+}