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

[rohanvasundhara]

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

https://github.com/user-attachments/assets/1ec9781a-ea90-49e2-8dde-4c0ebef212b5

### Tasks

[rohanvasundhara]

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

[amralaa-MSFT]

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

[rohanvasundhara]

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

Still issue is there in Clarity v2.1.0.

[rohanvasundhara]

https://github.com/user-attachments/assets/6f80788f-56f1-4253-8b77-2d349c43bc92

still issue is there in Clarity v2.1.0.

[amralaa-MSFT]

Thanks @rohanvasundhara for the update! I see that the issue is bit different now as the tab width keeps shrinking until it fits content. While I haven't been able to replicate this behavior using the code sample below, it would be very helpful if you could share a more specific example where this issue is occurring.

import UIKit
import CarbonKit

class ViewController: UIViewController, CarbonTabSwipeNavigationDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()

        let tabSwipe = CarbonTabSwipeNavigation(items: [ "One", "Two" ], delegate: self)
        tabSwipe.setTabExtraWidth(100)
        tabSwipe.insert(intoRootViewController: self)
    }

    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")
    }
}

[rohanvasundhara]

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")
    }
}

[amralaa-MSFT]

Thanks @rohanvasundhara. I really appreciate sharing the code snippet!

Unfortunately, we think the root cause is a bug in CarbonKit itself because CarbonTabSwipeSegmentedControl re-adjusts its width every time the view is drawn (see code). What Clarity did is that it called the view's draw function (in order to capture it) which kept adjusting the width gradually until it fit content.

You can confirm that the issue originates from CarbonKit by removing Clarity from your app and enforcing the view drawing by moving between the app, app switcher and home for many times and you should be able to observe gradual decrease in tabs' width.

[amralaa-MSFT]

@rohanvasundhara 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.