Ionic4 React framework - IonSlides is not populating pagination - why is params.pagination.el undefined? - reactjs

Question

I have a simple webapp built with the React build of Ionic4. Two of the 'sections' in the app are comprised of full screen IonSlides, with pagination (pager={true}).
In all browsers, except iPad Air Safari, the pagination is populating correctly and the pagination bullets appear. However, in iPad Safari, there is an empty pagination node (no bullet elements have been populated).
I expect it is a race condition but I can't pinpoint where or what is causing this to occur. When I debug and trace the properties of the slides component (which is an instance of Swiper JS) I see that swiper.params.pagination.el is undefined.
Can anyone help me figure out why it's undefined and/or how to correct?
I have tried dynamically adding the slides after componentDidMount. I have tried calling swiper.update() in componentDidMount as well as when the component enters view. I have tried calling swiper.pagination.update() and other resetting/re-updating methods within swiper.
Here's my stripped down/relevant code.
In the view class, declare the slider ref -->
private slider = createRef<any>();
In the component render() -->
<IonSlides ref={this.slider} pager={true}>
<IonSlide className="twocol">
content
</IonSlide>
<IonSlide className="twocol">
content
</IonSlide>
<IonSlide className="twocol">
content
</IonSlide>
<IonSlide className="twocol">
content
</IonSlide>
<IonSlide className="twocol">
content
</IonSlide>
</IonSlides>
In ionViewDidEnter, some of what I've tried (commented out just for reference) -->
ionViewDidEnter() {
this.slider.current.getSwiper().then((swiper:any) => {
// swiper.init();
// swiper.pagination.type='bullets';
// swiper.pagination.el='.swiper-pagination';
// swiper.pagination.init();
// swiper.pagination.render();
// swiper.pagination.update();
swiper.update();
swiper.slideTo(0,0);
}).catch((err:any) => {});
}
I get no error messages. The pagination is just an empty node. Only in iPad Safari. In all other browsers the pagination element contains the appropriate pagination-bullet nodes.

Answer 1

Ok, well I kept at it and I have a solution that works... not sure it's actually solving the underlying problem because I still can't figure out what the underlying problem is... But, posting a solution here in case it's useful to others someday...
I ended up giving a value to params.pagination.el and then init, render, and updating the pagination via the swiper instance to reinstantiate it.
Code used:
this.slider.current.getSwiper().then((swiper:any) => {
swiper.params.pagination.el = '.swiper-pagination';
swiper.pagination.init();
swiper.pagination.render();
swiper.pagination.update();
swiper.update();
}).catch((err:any) => {});