fix: timeline lines on iOS devices

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' );
 }
 
 /**

src/block/timeline/index.php

@@ -0,0 +1,25 @@
+<?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
+	// 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 );
+	}
+}

src/block/timeline/style.scss

@@ -19,6 +19,15 @@
 	padding: 16px 0;
 	margin-block-start: 0 !important;
 }
+
+// iOS polyfill for timeline accent color
+// 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
 // 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.