CSS issues only on IOS

Ok so it's a new design. Many good improvements. Nice! But is it not possible to at least move the follow button to the right side on small screens. When it stacks everything like that on the left side there will be so much white space on the right side.

How can I get it to sit beside the username or the Views-counter? I tried all different positions.

I have not install the template changer, and I don't think I changed any CSS root variable. And it only looks like that on IOS.
On Android and Windows there is no grey bar at all. It's the same on your demo site.

Ok so it's a new design. Many good improvements. Nice! But is it not possible to at least move the follow button to the right side on small screens. When it stacks everything like that on the left side there will be so much white space on the right side.

You've a lot of white space because your account is just "Admin" that's not typical and the users name will take up more than 50% of the space. So maybe in that specific situation it'd make better sense to have side by side, but we've to design for a situation where there's more content there.

How can I get it to sit beside the username or the Views-counter? I tried all different positions.

The only way to have side by side is you'll need to write custom CSS for that.

I have not install the template changer, and I don't think I changed any CSS root variable. And it only looks like that on IOS.
On Android and Windows there is no grey bar at all. It's the same on your demo site.

I don't have an iOS device to test this. I can't see why iOS would treat an RGBA color different than any other device. What is your iOS device? It's possible it's just too old and no longer able to be up to date. Our minimum supported Safari version is Safari 12.

You've a lot of white space because your account is just "Admin" that's not typical and the users name will take up more than 50% of the space. So maybe in that specific situation it'd make better sense to have side by side, but we've to design for a situation where there's more content there.

Ok, I see. That makes sense.

I don't have an iOS device to test this. I can't see why iOS would treat an RGBA color different than any other device. What is your iOS device? It's possible it's just too old and no longer able to be up to date. Our minimum supported Safari version is Safari 12.

I tried it on both a old iPhone 7 and a newer iPhone 11. Also tested with Firefox and it looks the same. If you don't have any Iphone you can test it on a cross browser testing tool. Like lambdatest.com, here you can test with for example an iPhone 11 for free. You get 6x10 minutes free testing/month (per emailadress you sign up with).

I tried it on both a old iPhone 7 and a newer iPhone 11. Also tested with Firefox and it looks the same. If you don't have any Iphone you can test it on a cross browser testing tool. Like lambdatest.com, here you can test with for example an iPhone 11 for free. You get 6x10 minutes free testing/month (per emailadress you sign up with).

Still don't see a way to fix it. It's just an RBGA background color. There's nothing special or browser specific going on there. My best guess is it's a CSS --light variable conflict coming from the browser and probably why in Bootstrap 5 it was changed to --bs-light. You can apply the below CSS to get rid of it, but it's going to impact all browsers. I don't have a solution, sorry. Safari is the new Internet Explorer unfortunately.

Ok, I think I found the issue. Safari renders transparent CSS keyword differently than other browsers. Have added a bug ticket to fix. The below should fix it.


Seams to be a known issue with Safari that Apple never intends to fix.

forge.joomlapolis.com/issues/8520

@media (max-width: 991.98px) {
.cb_template .cbNavBar > .cbNavBarContainer > .cbNavBarMenu > .cbNavBarOverflow {
background: rgba(255, 255, 255, 0) linear-gradient(90deg, transparent 0%, var(--light, #f8f9fa) 1rem);
}
}

Did not work for me, made no difference. I tried to add !important at the end also, but then I get this result