Blazor CSS Isolation bundle is not deployed to local iOS device

[richardhauer]

Description

When deploying a blazor app to a locally attached iOS device the "temp" folder that appears to be staging all the files for the production of the ipa is missing the CSS file that is the bundle of all the css isolation files MyBlazorApp.styles.css which should be in the wwwroot folder. This seems to be working for Android, windows and even the iOS simulator. It's only locally attached devices where there's an issue.

As you can see from the shot above the AssemblyName.styles.css is missing in the folder.

Steps to Reproduce

1. Create default Blazor hybrid maui app
2. Pair with Mac & startup iTunes
3. Start with Debugging, targeting iOS / Local device

I've noticed (as have others) that it is sometimes necessary to reset the SDK to Microsoft.NET.Sdk (i.e. remove .Razor) and reload the solution in order for the local device to appear as a debug target. This seems to happen from time to time which is annoying but not fatal.

Open the ipa file that is produced at .\AppData\Local\Temp\Xamarin\HotRestart\Signing\MyBlazorApp.app\out\MyBlazorApp.ipa as a zip and you can see that the CSS file is missing from \Payload\MyBlazorApp.app\wwwroot as well.

Version with bug

Release Candidate 3 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 15

Did you find any workaround?

Adding the file manually to this folder does not help. I have not found a workaround.

Relevant log output

Build logs do not indicate any sort of error has occurred. All logs appear normal.

[javiercn]

@richardhauer thanks for contacting us.

I think this might be a dupe of another hot-reload issue @SteveSandersonMS?

[SteveSandersonMS]

I'm not aware of this being a dupe of any specific hot reload issue. This issue seems to imply that the scoped CSS doesn't get delivered to the device at all, not just when hot-reloading.

If this is true we'd definitely want to service it. cc @mkArtakMSFT

[SteveSandersonMS]

@richardhauer Can you confirm this is happening with the final GA release of MAUI that shipped this week? We suspect the issue may already be fixed.

[ghost]

Hi @richardhauer. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[richardhauer]

@SteveSandersonMS Thanks for following up.
There are no available updates in the VS Installer. I am using VS Enterprise 17.3.0 Preview 1.1 which I believe to be the GA release.

I should note that the issue appears to be with the staging of files to be prepared into the ipa and not specifically with the deployment to the device itself, though broadly speaking we are in the "deployment phase".

Also noting that the file is being correctly staged, packaged and delivered to Windows and Android. We haven't got a full DevOps build going yet for iOS so I can't confirm if this only affects Local Device debugging, but running the system in the iOS Simulator and the styles all display correctly which implies that the file was created and deployed, so it seems to be isolated to iOS local device debugging only.

[MackinnonBuck]

@richardhauer Could you please tell us which iPhone/iPad models you tested on and the specific iOS versions installed?

[richardhauer]

I’m on an iPhone 11 Pro with 15.5 but the files were not even copied to the staging area on the Windows temp folder so I don’t think the iOS device has anything to do with it, tbh. The files that were prepared were correctly deployed to the device. The issue is in the preparation of the package, not the deployment to the device. IMHO. Richard Hauer CTO, Founder PING Works 1-7 Albion Place, Sydney NSW 2000 p: +61 2 9321 1551<tel:+61%202%209321%201551> | www.ping-works.com.au<https://www.ping-works.com.au> d: +61 2 9321 1556<tel:+61%202%209321%201556> | m: +61 414 189 170<tel:+61%20414%20189%20170> Download a vCard<https://vcard.ping-works.com.au/api/GenerateVCF?name=richard.hauer>

…

________________________________ From: Mackinnon Buck ***@***.***> Sent: Friday, June 3, 2022 3:54:59 AM To: dotnet/maui ***@***.***> Cc: Richard Hauer ***@***.***>; Mention ***@***.***> Subject: Re: [dotnet/maui] Blazor CSS Isolation bundle is not deployed to local iOS device (Issue #7468) @richardhauer<https://github.com/richardhauer> Could you please tell us which iPhone/iPad models you tested on and the specific iOS versions installed? — Reply to this email directly, view it on GitHub<#7468 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AABXEDYPT6BLAPNYI3E7I2LVNDYPHANCNFSM5W45KGBA>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[BlaineM-SeriouslyRAD]

I've got this issue as well.
Maui works great on Windows and Android, but not on iOS (Local Device).

Windows: 11 Pro (10.0.22000)
Visual Studio: Version 17.3.1
Phone: iPhone 7
iOS: 15.1

I've also updated the Maui templates using: dotnet new -i Microsoft.Maui.Templates

Steps:

• Install iTunes and connect an iPhone via USB
• Create a new .NET MAUI Blazor App named MauiApp1
• Run on iOS Local Devices -> DEVICE NAME

When the app launches, the template's sidebar and hamburger menu (which should be at the top of the page) are not visible.
Also, the "About" link which should be hidden is still visible.

Looking at the resources in the ipa file, MauiApp1.styles.css is missing.

Connecting the phone to the MacBook and debugging using Safari shows that MauiApp1.styles.css hasn't been loaded.
The error is "Did not parse stylesheet at 'app://0.0.0.0/MauiApp1.styles.css' because non CSS MIME types are not allowed in strict mode.". Inspecting the network panel shows "There is no content at MauiApp1.styles.css".

This is very similar to the closed (apparently fixed) issue #5245.

In essence, the bundled css for the razor components appears to be missing from the iOS build.

EDIT:
@MackinnonBuck looking at the issues assigned to you, there's #7600 which is the same issue.
Hopefully the information above helps resolve it!

[MackinnonBuck]

Would anyone in this thread experiencing this bug be able to produce a binlog for us to investigate? See this comment as an example for how to do this.

If you're having trouble getting things to work from the command line, you can use this this VS extension to generate binlogs.

Thanks!

[BlaineM-SeriouslyRAD]

I've collected some binlogs. Is there a secure way for me to send them over to you?

[javiercn]

@BlaineM-SeriouslyRAD file an issue through the visual studio report a problem UI and you can attach them there, link it here and that way we can access the attachments safely.

[BlaineM-SeriouslyRAD]

Ok, submitted here:

https://developercommunity.visualstudio.com/t/Blazor-CSS-Isolation-bundle-is-not-deplo/10131317

I've included binlogs for Local Device (which doesn't work properly as above) and also for Remote Device (which does work).
For each, I rebuilt first, then started debugging.

Using Local Device, this created 3 binlogs (Rebuild, Build, GetAppBundleDir).
Using Remote Device, this created 4 binlogs (Rebuild, Build, GetAppBundleDir, GetAppBundleDir).

I've also included the debug.log for each case. Note that Local Device has issues resolving assemblies whereas Remote Device does not.

Also - during this process I noticed that the splash screens are different so I've included screen shots for both Local and Remote Devices along with app screenshots for each demonstrating the issue with the missing bundled CSS.

Hope that helps! Happy to collect anything else you need.

Blaine

[Laftek]

@BlaineM-SeriouslyRAD also check this comment -> #9475 (reply in thread)

[BlaineM-SeriouslyRAD]

@MackinnonBuck I've also uploaded the build folders from the Local Device Build (Windows) and Remote Device Build (MacBook) on to the ticket (https://developercommunity.visualstudio.com/t/Blazor-CSS-Isolation-bundle-is-not-deplo/10131317) via a comment.

[BlaineM-SeriouslyRAD]

@BlaineM-SeriouslyRAD also check this comment -> #9475 (reply in thread)

Thanks, but I'm experiencing this with the default (unmodified) .NET MAUI Blazor App template which doesn't contain any external style sheets. 🤷‍♀️

[TomDacquinDMS]

I'm experiencing the same issue, did anyone find a workaround? App looks great on Android, but no component css being applied on iOS

[BlaineM-SeriouslyRAD]

I'm experiencing the same issue, did anyone find a workaround? App looks great on Android, but no component css being applied on iOS

@TomDacquinDMS The only workaround that I'm aware of is to use iOS Remote Device (via a Mac) instead of Local Device...

[codemonkey85]

Throwing my +1 on this issue, which I am also experiencing.

[MackinnonBuck]

This should be fixed in the upcoming Visual Studio 17.4.0 Preview 3 release.

[MackinnonBuck]

Going to close this out since xamarin/xamarin-macios#15979 should resolve this problem. We will reopen if we continue to receive reports of this after the fix goes public.

[RyanOliveira-Enabling]

#CanConfirm Visual Studio 17.4.0 Preview 3 release resolved this.

[ghost]

Hello lovely human, thank you for your comment on this issue. Because this issue has been closed for a period of time, please strongly consider opening a new issue linking to this issue instead to ensure better visibility of your comment. Thank you!