UI Issues with CarbonKit When Using Microsoft Clarity SDK (iOS)

rohanvasundhara commented 3 months ago

Description:

I am encountering a UI issue with the CarbonKit library when integrating Microsoft Clarity SDK into my iOS app. The UI behaves incorrectly only when the Clarity SDK is included, but functions as expected without it.

Steps to Reproduce:

-> Integrate CarbonKit into your iOS project following the standard installation and setup instructions. -> Integrate Microsoft Clarity SDK into the same project. -> Run the application and observe the UI of the CarbonKit components.

Expected Behavior:

The UI of CarbonKit components should display correctly and function as intended, regardless of the Microsoft Clarity SDK integration.

Actual Behavior:

The UI of CarbonKit components is not displaying correctly when Microsoft Clarity SDK is included. The issues include [briefly describe the specific UI issues, e.g., layout problems, broken components, etc.].

Additional Information:

CarbonKit Version: 2.3.1 Microsoft Clarity SDK Version: 2.0.0 iOS Version: 17.14.1 Device Model: iPad 10th Gen // iPhone SE2

Video:

https://github.com/user-attachments/assets/50e8d28a-5e6d-4656-8cff-d3f661a08f91

amralaa-MSFT commented 3 months ago

Moving the discussion to https://github.com/microsoft/clarity-apps/issues/52

rohanvasundhara commented 3 months ago

@amralaa-MSFT If you have any queries, please feel free to let me know. I am always available to assist you.

rohanvasundhara commented 3 months ago

@amralaa-MSFT If you have any queries, please feel free to let me know. I am always available to assist you.

shivamican commented 3 months ago

@amralaa-MSFT @rohanvasundhara

I am facing the same issue with clarity and the carbon kit. What steps can we take to resolve it? Have you found any solution?

amralaa-MSFT commented 3 months ago

We've discovered an unexpected behavior that happens when Clarity captures one of the UI views created by CarbonTabSwipeNavigation and a fix is coming soon.

@shivamican: Please let us know if you encounter the issue with other CarbonKit components.

shivamican commented 3 months ago

@amralaa-MSFT No, I am using CarbonTabSwipeNavigation and am facing the same issue.

amralaa-MSFT commented 3 months ago

The issue should be fixed if you upgrade to Clarity v2.1.0.

rohanvasundhara commented 3 months ago

@amralaa-MSFT @rohanvasundhara

I am facing the same issue with clarity and the carbon kit. What steps can we take to resolve it? Have you found any solution?

@shivamican not found any solution and still issue is not resolved

rohanvasundhara commented 3 months ago

The issue should be fixed if you upgrade to Clarity v2.1.0.

still issue is there in Clarity v2.1.0.

shivamican commented 3 months ago

The issue should be fixed if you upgrade to Clarity v2.1.0.

@amralaa-MSFT This is not fixed. Please check again.

rohanvasundhara commented 3 months ago

@amralaa-MSFT here i sharing my current code please review this

import UIKit
import CarbonKit

class TestVC: UIViewController,CarbonTabSwipeNavigationDelegate {

   @IBOutlet weak var viewCarbonKitContainer: UIView!
    var carbonTabSwipeNavigation = CarbonTabSwipeNavigation()

    override func viewDidLoad() {
        super.viewDidLoad()

        SetupCarbonkit()
    }

    func SetupCarbonkit() {

        carbonTabSwipeNavigation = CarbonTabSwipeNavigation(items: ["test 1","test 2"], delegate: self)
        carbonTabSwipeNavigation.carbonTabSwipeScrollView.backgroundColor = .red
        carbonTabSwipeNavigation.toolbar.barTintColor = .green
        carbonTabSwipeNavigation.toolbar.isTranslucent = false
        carbonTabSwipeNavigation.setSelectedColor(.green)
        carbonTabSwipeNavigation.setNormalColor(.yellow)

        carbonTabSwipeNavigation.setTabBarHeight(50)
        carbonTabSwipeNavigation.setIndicatorColor(.green)

        var frameRect: CGRect = carbonTabSwipeNavigation.carbonSegmentedControl!.frame
        frameRect.size.width = UIScreen.main.bounds.size.width
        carbonTabSwipeNavigation.carbonSegmentedControl?.frame = frameRect
        carbonTabSwipeNavigation.carbonSegmentedControl?.bounds.origin.x = 20
        carbonTabSwipeNavigation.carbonSegmentedControl?.apportionsSegmentWidthsByContent = false
        carbonTabSwipeNavigation.insert(intoRootViewController: self, andTargetView: self.viewCarbonKitContainer)
    }

    func carbonTabSwipeNavigation(_ carbonTabSwipeNavigation: CarbonTabSwipeNavigation, viewControllerAt index: UInt) -> UIViewController {
        guard let storyboard = storyboard else { return UIViewController() }
        if index == 0 {
            return storyboard.instantiateViewController(withIdentifier: "FirstViewController")
        }
        return storyboard.instantiateViewController(withIdentifier: "SecondTableViewController")
    }
}

shivamican commented 2 months ago

Hi @amralaa-MSFT

Any update on this?

amralaa-MSFT commented 2 months ago

@shivamican Thanks for the reminder. An update has already been posted on clarity-apps repo https://github.com/microsoft/clarity-apps/issues/52#issuecomment-2346400314.

A new Clarity version has been released with a fix for this issue. Please try upgrading to Clarity version 2.1.2 and let us know if this completely resolves the issue.

microsoft / clarity