From f76141c0d8b8e749e11abca4b6761a8a9c6e4546 Mon Sep 17 00:00:00 2001
From: mxkae <tapiamkr@gmail.com>
Date: Thu, 12 Oct 2023 10:52:26 +0800
Subject: [PATCH 1/2] add polyfill

---
 plugin.php                    |  1 +
 src/block/timeline/index.php  | 23 +++++++++++++++++++++++
 src/block/timeline/style.scss |  7 +++++++
 3 files changed, 31 insertions(+)
 create mode 100644 src/block/timeline/index.php

diff --git a/plugin.php b/plugin.php
index 5814efe1c..a8524d622 100644
--- a/plugin.php
+++ b/plugin.php
@@ -225,6 +225,7 @@ function stackable_deactivation_cleanup() {
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/tabs/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block-components/alignment/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/columns/index.php' );
+	require_once( plugin_dir_path( __FILE__ ) . 'src/block/timeline/index.php' );
 }
 
 /**
diff --git a/src/block/timeline/index.php b/src/block/timeline/index.php
new file mode 100644
index 000000000..1829e5a9e
--- /dev/null
+++ b/src/block/timeline/index.php
@@ -0,0 +1,23 @@
+<?php
+/**
+ * In charge of loading the frontend polyfill for timeline block
+ * accent color fill for iOS devices
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! function_exists( 'stackable_load_timeline_ios_frontend_polyfill' ) ) {
+	function stackable_load_timeline_ios_frontend_polyfill( $block_content, $block ) {
+		// Add class stk-block-timeline__ios-polyfill to $block_content
+		return preg_replace( '/stk-block-timeline/', 'stk-block-timeline stk-block-timeline__ios-polyfill', $block_content, 1 );
+	}
+
+	$user_agent = ! empty( $_SERVER['HTTP_USER_AGENT'] ) ? $_SERVER['HTTP_USER_AGENT'] : '';
+	// Add polyfill if device is iPhone/iPad
+	if ( ! empty( $user_agent ) && ( stripos( $user_agent, 'iPhone' ) !== false || stripos( $user_agent, 'iPad' ) !== false ) ) {
+		add_filter( 'render_block_stackable/timeline', 'stackable_load_timeline_ios_frontend_polyfill', 10, 2 );
+	}
+}
diff --git a/src/block/timeline/style.scss b/src/block/timeline/style.scss
index adab820aa..555524278 100644
--- a/src/block/timeline/style.scss
+++ b/src/block/timeline/style.scss
@@ -19,6 +19,13 @@
 	padding: 16px 0;
 	margin-block-start: 0 !important;
 }
+
+// iOS polyfill for timeline accent color
+// fill timeline lines filled with accent color
+.stk-block-timeline.stk-block-timeline__ios-polyfill {
+	--fixed-bg: linear-gradient(to bottom, var(--line-accent-bg-color, #000) 0, var(--line-accent-bg-color-2, #000) var(--line-accent-bg-location, 50%));
+}
+
 // Remove the default bottom margin of the timeline block because it's annoying
 // to keep on removing it when you want to stack them. This works in conjunction
 // with the stackable.resizable-bottom-margin.default filter in edit.js.

From 6df6515a95216b8cfc9d5ffa4bee3f29d8535c8d Mon Sep 17 00:00:00 2001
From: mxkae <tapiamkr@gmail.com>
Date: Wed, 25 Oct 2023 12:17:10 +0800
Subject: [PATCH 2/2] fix timeline lines on iPad

---
 src/block/timeline/index.php  | 4 +++-
 src/block/timeline/style.scss | 8 +++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/block/timeline/index.php b/src/block/timeline/index.php
index 1829e5a9e..862192d1e 100644
--- a/src/block/timeline/index.php
+++ b/src/block/timeline/index.php
@@ -17,7 +17,9 @@ function stackable_load_timeline_ios_frontend_polyfill( $block_content, $block )
 
 	$user_agent = ! empty( $_SERVER['HTTP_USER_AGENT'] ) ? $_SERVER['HTTP_USER_AGENT'] : '';
 	// Add polyfill if device is iPhone/iPad
-	if ( ! empty( $user_agent ) && ( stripos( $user_agent, 'iPhone' ) !== false || stripos( $user_agent, 'iPad' ) !== false ) ) {
+	// Include Safari because by default the User Agent in Safari on iPadOS is same  on MacOS
+	// Reference: https://developer.apple.com/forums/thread/119186
+	if ( ! empty( $user_agent ) && ( stripos( $user_agent, 'iPhone' ) !== false || stripos( $user_agent, 'iPad' ) !== false || stripos( $user_agent, 'Safari/' ) !== false ) ) {
 		add_filter( 'render_block_stackable/timeline', 'stackable_load_timeline_ios_frontend_polyfill', 10, 2 );
 	}
 }
diff --git a/src/block/timeline/style.scss b/src/block/timeline/style.scss
index 555524278..be750a32a 100644
--- a/src/block/timeline/style.scss
+++ b/src/block/timeline/style.scss
@@ -21,9 +21,11 @@
 }
 
 // iOS polyfill for timeline accent color
-// fill timeline lines filled with accent color
-.stk-block-timeline.stk-block-timeline__ios-polyfill {
-	--fixed-bg: linear-gradient(to bottom, var(--line-accent-bg-color, #000) 0, var(--line-accent-bg-color-2, #000) var(--line-accent-bg-location, 50%));
+// For tablet and mobile, fill timeline lines with accent color
+@include tablet-mobile {
+	.stk-block-timeline.stk-block-timeline__ios-polyfill {
+		--fixed-bg: linear-gradient(to bottom, var(--line-accent-bg-color, #000) 0, var(--line-accent-bg-color-2, #000) var(--line-accent-bg-location, 50%));
+	}
 }
 
 // Remove the default bottom margin of the timeline block because it's annoying