[email protected] - Fix ios safari bug. (#2329)

justeattakeaway · Sep 11, 2023 · 94059ee · 94059ee
1 parent 2a3db1a
commit 94059ee
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/packages/components/atoms/f-toggle-switch/CHANGELOG.md b/packages/components/atoms/f-toggle-switch/CHANGELOG.md
@@ -3,6 +3,13 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+v0.2.0
+------------------------------
+*September 08, 2023*
+
+### Fixed
+- Toggle switch IOS safari visual bug (placement of the toggle control was not aligned correctly.)
+
 
 v0.1.0
 ------------------------------

diff --git a/packages/components/atoms/f-toggle-switch/package.json b/packages/components/atoms/f-toggle-switch/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-toggle-switch",
   "description": "Fozzie Toggle Switch - A component to switch a single setting on/off",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "dist/f-toggle-switch.umd.min.js",
   "maxBundleSize": "5kB",
   "files": [

diff --git a/packages/components/atoms/f-toggle-switch/src/components/ToggleSwitch.vue b/packages/components/atoms/f-toggle-switch/src/components/ToggleSwitch.vue
@@ -87,6 +87,7 @@ $toggle-switch-translation: calc($toggle-switch-width - $toggle-switch-control-s
 }
 
 .c-toggle-switch {
+    position: relative;
     display: flex;
     @include toggle-switch-transition(background-color);
     width: $toggle-switch-width;
@@ -143,6 +144,8 @@ $toggle-switch-translation: calc($toggle-switch-width - $toggle-switch-control-s
 }
 
 .c-toggle-switch-control {
+    position: absolute;
+    left: 2px;
     @include toggle-switch-transition(transform);
     display: flex;
     align-items: center;
@@ -166,6 +169,11 @@ $toggle-switch-translation: calc($toggle-switch-width - $toggle-switch-control-s
 }
 
 [dir="rtl"] {
+    .c-toggle-switch-control {
+        left: initial;
+        right: 2px;
+    }
+
     .c-toggle-switch-input:checked + .c-toggle-switch-control {
         @include toggle-switch-transition(transform);
         transform: translateX(-$toggle-switch-translation);