Issues with some animations on tabs

Firstly, full disclosure that I did not design/develop this site myself but had a developer helping me but I think we’ve hit some knowledge limitations. I am not overly experienced at Webflow or javascript but used to ‘program’ way back when which makes me more dangerous than knowledgeable :slight_smile:

Any help/guidance on this is appreciated.

Info-graphic Bullseyes Issues:

We have an info-graphic on our homepage that is an image of a house with bullseyes on it and text on the right (for large screen devices) or below (for small screen devices). The text and bullseyes are set up as tabs (see attached WF navigator screenshot) with the bullseye changing to red when you select it and the appropriate text showing. We added javascript to automatically rotate through the tabs every 5 seconds. This change to red is for large screen devices is done via a font colour change on the bullseye character for large screen devices. Through research I found iPhone’s don’t support font colour changes in this scenario. So for all small screen devices I tried setting it up as a red background on the standard tab element that appears behind each bullseye when that bullseye’s tab is featured through the rotation. I had to radius the standard tab element to make it align with the bullseye.

The issues I’m encountering:

On a computer/laptop:

Chrome and firefox seem to work fine (see Loom Video)

For Safari the bullseye disappears when it’s corresponding text is featured. I believe this is similar to the iphone issue where safari does not support font colour changes. (see Loom video).

I can try and copy what I did for small devices here so instead of changing the bullseye to red via font colour have a background red colour appear (behind the featured bullseye) but now I cannot figure out how I did the background colour change for small devices. I can’t even find where I set the background to ‘red’. Thoughts on how I can recreate what I did with the red background for small screens?

On phone:

Firefox/chrome - The infographic bullseyes shift position when featured (i.e. as the javascript rotates through the ‘tabs’). see Loom video.

They are supposed to change to red but not shift positions. What setting do I need to change to stop the bullseyes from shifting? I’ve tried several different settings including margins, padding, etc without success.

The “Garage” bullseye disappears when it’s tab is featured. I can’t seem to duplicate the red background appearing behind the bullseye when the “Garage” tab is featured through the rotation like I did with the other tabs? Any idea how I did/do this?. I have tried everything to recreate this for the Garage tab including copying the elements from the other tabs but have had no luck.

Safari - similar to a Macbook with Safari the infographic bullseyes disappear (vs turn red) as the javascript rotates through the ‘tabs’. (I don’t have a video clip of iPhone safari yet)


Here is our website: www.homebert.com
Here is our public share link: Webflow Read Only
(how to access public share link)

Again, any help/guidance on this is appreciated.