diff --git a/core/src/components/datetime/test/standalone/e2e.ts b/core/src/components/datetime/test/standalone/e2e.ts
index 88a000f614..37a9ebe607 100644
--- a/core/src/components/datetime/test/standalone/e2e.ts
+++ b/core/src/components/datetime/test/standalone/e2e.ts
@@ -16,4 +16,11 @@ it('datetime: standalone', async () => {
 
   compare = await page.compareScreenshot('should open basic picker');
   expect(compare).toMatchScreenshot();
+
+  const octoberOpt = await page.find({ text: 'October' });
+  await octoberOpt.click();
+  await page.waitFor(500);
+
+  compare = await page.compareScreenshot('should click "October" option');
+  expect(compare).toMatchScreenshot();
 });
diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index 97dd22bace..0fa7729938 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -23,6 +23,8 @@ export class PickerColumnCmp implements ComponentInterface {
   private optsEl?: HTMLElement;
   private gesture?: Gesture;
   private rafId: any;
+  private tmrId: any;
+  private noAnimate = true;
 
   @Element() el!: HTMLElement;
 
@@ -64,10 +66,16 @@ export class PickerColumnCmp implements ComponentInterface {
       onEnd: ev => this.onEnd(ev),
     });
     this.gesture.setDisabled(false);
+
+    this.tmrId = setTimeout(() => {
+      this.noAnimate = false;
+      this.refresh(true);
+    }, 250);
   }
 
   componentDidUnload() {
     cancelAnimationFrame(this.rafId);
+    clearTimeout(this.tmrId);
   }
 
   private setSelected(selectedIndex: number, duration: number) {
@@ -100,14 +108,11 @@ export class PickerColumnCmp implements ComponentInterface {
       const button = children[i] as HTMLElement;
       const opt = col.options[i];
       const optOffset = (i * this.optHeight) + y;
-      let visible = true;
       let transform = '';
 
       if (rotateFactor !== 0) {
         const rotateX = optOffset * rotateFactor;
-        if (Math.abs(rotateX) > 90) {
-          visible = false;
-        } else {
+        if (Math.abs(rotateX) <= 90) {
           translateY = 0;
           translateZ = 90;
           transform = `rotateX(${rotateX}deg) `;
@@ -115,25 +120,24 @@ export class PickerColumnCmp implements ComponentInterface {
       } else {
         translateZ = 0;
         translateY = optOffset;
-        if (Math.abs(translateY) > 170) {
-          visible = false;
-        }
       }
 
       const selected = selectedIndex === i;
-      if (visible) {
-        transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
-        if (this.scaleFactor !== 1 && !selected) {
-          transform += scaleStr;
-        }
-      } else {
-        transform = 'translate3d(-9999px,0px,0px)';
+      transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
+      if (this.scaleFactor !== 1 && !selected) {
+        transform += scaleStr;
       }
+
       // Update transition duration
-      if (duration !== opt.duration) {
+      if (this.noAnimate) {
+        opt.duration = 0;
+        button.style.transitionDuration = '';
+
+      } else if (duration !== opt.duration) {
         opt.duration = duration;
         button.style.transitionDuration = durationStr;
       }
+
       // Update transform
       if (transform !== opt.transform) {
         opt.transform = transform;
@@ -271,7 +275,7 @@ export class PickerColumnCmp implements ComponentInterface {
     if (this.velocity === 0 && detail.deltaY === 0) {
       const opt = (detail.event.target as Element).closest('.picker-opt');
       if (opt && opt.hasAttribute('opt-index')) {
-        this.setSelected(parseInt(opt.getAttribute('opt-index')!, 10), 150);
+        this.setSelected(parseInt(opt.getAttribute('opt-index')!, 10), TRANSITION_DURATION);
       }
 
     } else {
@@ -280,7 +284,7 @@ export class PickerColumnCmp implements ComponentInterface {
     }
   }
 
-  private refresh() {
+  private refresh(forceRefresh?: boolean) {
     let min = this.col.options.length - 1;
     let max = 0;
     const options = this.col.options;
@@ -292,10 +296,10 @@ export class PickerColumnCmp implements ComponentInterface {
     }
 
     const selectedIndex = clamp(min, this.col.selectedIndex || 0, max);
-    if (this.col.prevSelected !== selectedIndex) {
+    if (this.col.prevSelected !== selectedIndex || forceRefresh) {
       const y = (selectedIndex * this.optHeight) * -1;
       this.velocity = 0;
-      this.update(y, 150, true);
+      this.update(y, TRANSITION_DURATION, true);
     }
   }
 
@@ -348,3 +352,4 @@ export class PickerColumnCmp implements ComponentInterface {
 const PICKER_OPT_SELECTED = 'picker-opt-selected';
 const DECELERATION_FRICTION = 0.97;
 const MAX_PICKER_SPEED = 90;
+const TRANSITION_DURATION = 150;