ionic-cli
ionic-cli copied to clipboard
Ionic lab does not render IOS UI
Description:
When using Ionic lab I find that the UI between the two rendered frames (IOS,MD) are exactly the same and do not differ. it appears that Ionic lab only renders MD components in the lab.
Steps to Reproduce:
Open ionic lab with any app.
Output:
ionic serve -l ionic serve --lab
My ionic info
:
Ionic:
Ionic CLI : 6.11.10 (C:\Users\Tyler\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/react 5.1.0
Capacitor:
Capacitor CLI : 2.1.0
@capacitor/core : 2.4.1
Utility:
cordova-res : 0.15.1
native-run : not installed
System:
NodeJS : v12.18.3 (C:\Program Files\nodejs\node.exe)
npm : 6.14.6
OS : Windows 10
Other Information:
- Upgrading to @ionic/[email protected] or higher does not fix the issue. Instead, it creates a 404 error and doesn't render the lab at all
- Specific components can be forced into rendering in IOS by using the mode attribute on the specific component (but it can create oversizing issues)
Hello, I can confirm this. For me its not working, after saving something in my project and live reload triggering. If I manually refresh ionic-lab then it works as intended.
Using latest Google Chrome
I'm having the same issue and I'm not able to fix it with live reload or restarting the process.
Ionic CLI: 6.16.3 Ionic Framework: @ionic/react 5.6.12 Ionic lab: 3.2.10 Capacitor: 3.1.2 OS: Catalina NodeJS: 14.15.3 Browser: Google Chrome
I have the same on Safari and Chrome
Also the safe areas are not respected in lab, maybe using an iphone without a notch can help also to not have this visual glitch.

Hi everyone,
We recently deprecated Ionic Labs in favor of using the built-in browser tools for mobile emulation. These tools more accurately simulate a mobile environment than Ionic Labs does. We have documentation for getting set up with the browser dev tools on our documentation website: https://ionicframework.com/docs/developing/previewing
I am going to close this, but let me know if there are any questions.