UIStroke not disappearing after MouseLeave on mobile

Hi

So in my game I have a shop where players can purchase items with either robux or the in-game currency. To enhance the UI, I added a UIStroke on Gui elements that are being hovered over to make it look better. However whenever a player on a Mobile device with a touch screen leaves the Gui element, the UIStroke is sometimes still there.

I’ve done some digging and apparently MouseEnter and MouseLeave aren’t valid events on mobile (even though the MouseEnter and MouseButton1Click work on mobile and MouseLeave sometimes works). reference

Any recommendations for what may be the issue here?

I’ll attach some of my code and a video

Code
--Defines table of buttons
local mainScrollingFrameButtons = {}

--Adds buttons to table
for _, guiElement in pairs(mainContainer.MainScrollingFrameContainer.MainScrollingFrame:GetChildren()) do
	if guiElement:IsA("Frame") and (string.find(guiElement.Name, "Texture") or string.find(guiElement.Name, "Color") or string.find(guiElement.Name, "Default")) then
		table.insert(mainScrollingFrameButtons, guiElement)
	end
end

--Loops through buttons w/ mouse events.
for _, mainButton in pairs(mainScrollingFrameButtons) do
	mainButton.MouseEnter:Connect(function()
		HoverSound:Play()
		TweenService:Create(mainButton, GUIHoverInfo, {Size = UDim2.fromScale(0.87 * 1.05, 4.748 * 1.05)}):Play()
		local borderStroke = Instance.new("UIStroke", mainButton)
		borderStroke.Name = "BorderUIStroke"
		borderStroke.Color = Color3.fromRGB(255, 255, 255)
		borderStroke.Thickness = ContainerUIStrokeThickness

		mainButton.MouseLeave:Connect(function() -- doesn't always run on mobile
			TweenService:Create(mainButton, GUIHoverInfo, {Size = UDim2.fromScale(0.87, 4.748)}):Play()
			if mainButton:FindFirstChild("BorderUIStroke") then
				mainButton.BorderUIStroke:Destroy()
			end
		end)
	end)

	local mainButtonDebounce = false
	mainButton.BuyButton.MouseButton1Click:Connect(function()
		--other irrelevant actions here
	end)
end
Video

Note:

  1. I’ve tried also using the Enum.GuiState property to determine wether the player is still hovering over but it didn’t go so smoothly (if you know a surefire way you can use Enum.GuiState to make it work, please tell me).

Thanks

What if you just store which element got the stroke last then when another one gets a stroke from mouseenter you remove the stroke from the last element that had stroke. This doesnt completely fix it but personally ai think I’d prefer it this on mobile devices that it stays on the last you hovered on. I don’t really know a complete fix as I don’t do much ui stuff especially for anything other than pc