SwitchCompat showing box outline and background on certain devices

Question

Please take a look at the attached image.

This is my XML code:

<android.support.v7.widget.SwitchCompat
                android:id="@+id/mySwitch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_gravity="center_vertical"
                android:checked="false"
                android:gravity="center_vertical"
                android:theme="@style/MySwitch" />

This is my style:

<style name="MySwitch" parent="Theme.AppCompat.Light">
    <item name="colorControlActivated">#FF0000</item>
    <item name="colorSwitchThumbNormal">@color/switchInactiveThumbColor</item>
    <item name="android:colorForeground">@color/black</item>
</style>

I have tested it on Nexus 5, Nexus 6P, Nexus 5X and a number of Samsung devices. It works fine on them. But it shows these boxes in Samsung Galaxy S6 Edge and HTC One M9 Plus. How can I fix this?