Observable timer to using setInterval

Question

Apparently I am experiencing some odd behaviour when I use Observable.timer in Chrome. I am using a countdown component which counts down from a specific time till 0. When I executed the countdown in one tab, changed with another tab and come back to the original tab later, countdown seemed to be executing at a slower pace. I think it is a related issue here.

If I use setInterval instead of Observable.timer, would it work? If that's the case, how can I change my code? Help is really appreciated.

import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core'
import { Observable, Subscription } from 'rxjs/Rx';

@Component({
  selector: 'countdown',
  template: '{{ countDown | async | formatTime }}'
})
export class CountdownComponent implements OnInit {
  @Input() seconds: string;
  @Output() checkTime: EventEmitter<number> = new EventEmitter();
  countDown: any;

  constructor() {}

  ngOnInit() {
    const start = parseInt(this.seconds, 10);
    this.countDown = Observable.timer(0, 1000)
                .map(i => start - i) // decrement the stream's value and return
                .takeWhile(i => i >= 0)
                .do(s => this.checkTime.emit(s)) // do a side effect without affecting value
  }
}