From a6e6297c317d74ac1683e4a151f30c33cbddefdc Mon Sep 17 00:00:00 2001
From: Sandro Ducceschi <github@eatcodeplay.ch>
Date: Sun, 29 Jun 2025 14:56:41 +0200
Subject: [PATCH] fix: safari specific css for the linear-gradient based fade
 feature

---
 examples/snippet.css    |  4 +++-
 manifest.json           |  2 +-
 package-lock.json       |  4 ++--
 package.json            |  2 +-
 src/scss/banner.scss    | 21 ++++++++++++---------
 src/scss/variables.scss |  1 +
 6 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/examples/snippet.css b/examples/snippet.css
index cd3df91..95533d6 100644
--- a/examples/snippet.css
+++ b/examples/snippet.css
@@ -28,8 +28,10 @@ body {
 	/* Background image offsets */
 	--sb-img-x: 0;
 	--sb-img-y: 0;
-	/* Mask that is applied over the image */
+	/* Mask/Gradient that is applied over the image */
 	--sb-mask: linear-gradient(180deg, transparent 25%, var(--background-primary));
+	/* iOS/iPadOS/Safari specific workaround  */
+	--sb-mask-webkit: -webkit-linear-gradient(270deg, transparent 25%, var(--background-primary));
 
 	/* -------------------------------
 	  Icon Variables
diff --git a/manifest.json b/manifest.json
index cf897cc..e5e983c 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "simple-banner",
 	"name": "Simple Banner",
-	"version": "0.5.6",
+	"version": "0.5.7",
 	"minAppVersion": "1.8.9",
 	"description": "Visually enhance your notes with a customizable banner. Supports icons and time/date display.",
 	"author": "Sandro Ducceschi",
diff --git a/package-lock.json b/package-lock.json
index 46e71d6..cccf809 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "simple-banner",
-	"version": "0.5.6",
+	"version": "0.5.7",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "simple-banner",
-			"version": "0.5.6",
+			"version": "0.5.7",
 			"license": "MIT",
 			"devDependencies": {
 				"@types/node": "^16.11.6",
diff --git a/package.json b/package.json
index dc36cdf..1a2c95b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "simple-banner",
-	"version": "0.5.6",
+	"version": "0.5.7",
 	"description": "Visually enhance your notes with a customizable banner. Supports icons and time/date display.",
 	"main": "dist/main.js",
 	"scripts": {
diff --git a/src/scss/banner.scss b/src/scss/banner.scss
index 13790f8..33cabc5 100644
--- a/src/scss/banner.scss
+++ b/src/scss/banner.scss
@@ -10,6 +10,7 @@ div.simple-banner {
 	margin-left: var(--sb-padding);
 	max-height: var(--sb-height);
 	padding: var(--size-4-3) var(--size-4-3) 0 var(--size-4-3);
+	transform: translate3d(0,0,0);
 	user-select: none;
 
 	& > video {
@@ -18,20 +19,20 @@ div.simple-banner {
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
+		z-index: 2;
 		animation: fade-in 0.7s linear forwards, banner-anim 0.8s ease-out;
 		object-position: calc(50% + var(--sb-img-x)) calc(50% + var(--sb-img-y));
 		border-radius: var(--sb-radius);
 		transition: object-position 0.5s ease-in-out;
 		will-change: object-position;
+		transform: translate3d(0,0,0);
 	}
 
 	&:before {
+		content: '';
 		position: absolute;
 		inset: 0;
-		z-index: -1;
-		width: 100%;
-		height: 100%;
-		content: '';
+		z-index: 2;
 		box-shadow: inset 0 2px 4px 1px rgba(0, 0, 0, 0.1);
 		border-radius: var(--sb-radius);
 		background-color: rgba(0,0,0,.2);
@@ -45,16 +46,18 @@ div.simple-banner {
 		will-change: transform, background-position-x, background-position-y;
 		transform-style: preserve-3d;
 		backface-visibility: hidden;
+		transform: translate3d(0,0,0);
 	}
 
 	&:after {
 		position: absolute;
 		inset: 0;
-		z-index: 1;
-		width: 100%;
-		height: 100%;
+		z-index: 3;
 		content: '';
+		border-radius: var(--sb-radius);
 		background: var(--sb-mask);
+		background: var(--sb-mask-webkit);
+		transform: translate3d(0,0,0);
 		overflow: hidden;
 	}
 
@@ -64,14 +67,14 @@ div.simple-banner {
 
 	& + div {
 		position: relative;
-		z-index: 3;
+		z-index: 4;
 	}
 }
 
 body {
 	&.is-phone, &.is-tablet {
 		div.simple-banner {
-			width: calc(100% - (var(--sb-padding) - 2px));
+			width: calc(100% - (var(--sb-padding) * 2));
 		}
 	}
 }
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index f3bcdcc..ab6cd3e 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -9,6 +9,7 @@ body {
 	--sb-img-x: 0;
 	--sb-img-y: 0;
 	--sb-mask: linear-gradient(180deg, transparent 25%, var(--background-primary));
+	--sb-mask-webkit: -webkit-linear-gradient(270deg, transparent 25%, var(--background-primary));
 
 	/* Icon Variables */
 	--sb-icon-align-h: flex-start;