Apples Captive Network Assistant + Bootstrap splash page not working

[limona21]

I built this portal page with some help from bootstrap 4 and it works perfectly in the safari browser on Mac OS but looks awful in captive network assistant - the program that Mac OS opens when behind captive portal. However iOS seems to do a fine job as well as Windows 10. The latter doesn't seem to have a dedicated captive network assistant it just pops up the browser automagically. It also doesn't have exactly the same fonts but that doesn't bother me.

Did someone have the same problems? Anyone tried using bootstrap for splash page? Can anyone think of a thing that could be causing the problem? I understand that little program can't have as many features as full fledged browser but can it render a page?

The last resort for me would be to build the same page with hard old pure html and css and hopefully fix the issue. Any ideas?

Below are the ss of pages on safari browser and captive network assistant. Same code different apps.


[heper]

have you tried adding this?

[limona21]

Yeah I have that. This is my code. Does it work for you?

   <video autoplay="" loop="" muted=""><source src="captiveportal-kava.mp4" type="video/mp4"></video> 

# ![](captiveportal-logo.png)
 Welcome to Salaš Ostražica

<form method="post" action="$PORTAL_ACTION$" class="form-inline">

Make and order and ask the waiter for a voucher code. Input your 
 voucher code to access the Internet. Enjoy your meal!

                            <label class="sr-only">Portal Redirect URL</label>

                            <label class="sr-only">Portal Zones</label>

                            <label class="sr-only">Submit Button</label>

                            <label class="sr-only">Homepage Button</label>
                            [](captiveportal-homepage.html)

                    </form>

[heper]

i currently have no CP testing environment & don't have apple gear to test.

that said, how did you allow access to bootstrapcdn.com & googleapis.com ? did you manually enter all their individual cidr ranges in the 'allowed IP adressses' fields ?

[limona21]

nah no IPs. I allowed these hostnames:

ajax.googleapis.com
fonts.googleapis.com
maxcdn.bootstrapcdn.com

The thing that I can't wrap my head around is that it works in the browser but not this app that pops up "Captive Network Assistant". I also tried allowing the captive.apple.com hostname so device thinks it's got Internet access and there is no more of this pop up but that makes it really inconvenient to authenticate on mobile devices.

I guess I am going to have to try and make pure html and css page and see if that does the trick.