CSS issues only on IOS

silverman1
OFFLINE
Senior Member
Posts: 48
Thanks: 1
Karma: 0

2 years 11 months ago #324848 by silverman1

Replied by silverman1 on topic 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.

Please Log in to join the conversation.

krileon
Team Member
OFFLINE
Posts: 68554
Thanks: 9095
Karma: 1434

2 years 11 months ago #324853 by krileon

Replied by krileon on topic 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.

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.

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

silverman1
OFFLINE
Senior Member
Posts: 48
Thanks: 1
Karma: 0

2 years 11 months ago #324862 by silverman1

Replied by silverman1 on topic CSS issues only on IOS

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).

Please Log in to join the conversation.

krileon
Team Member
OFFLINE
Posts: 68554
Thanks: 9095
Karma: 1434

2 years 11 months ago #324865 by krileon

Replied by krileon on topic CSS issues only on IOS

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.

.cb_template .cbNavBar > .cbNavBarContainer > .cbNavBarMenu > .cbNavBarOverflow {
	background: #f8f9fa;
}

Please Log in to join the conversation.

krileon
Team Member
OFFLINE
Posts: 68554
Thanks: 9095
Karma: 1434

2 years 11 months ago #324866 by krileon

Replied by krileon on topic CSS issues only on IOS

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.

@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);
  }
}

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

forge.joomlapolis.com/issues/8520

Please Log in to join the conversation.

silverman1
OFFLINE
Senior Member
Posts: 48
Thanks: 1
Karma: 0

2 years 11 months ago #324868 by silverman1

Replied by silverman1 on topic CSS issues only on IOS

@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

Please Log in to join the conversation.

Moderators: beat, nant, krileon

Time to create page: 1.643 seconds

CSS issues only on IOS

Attachments:

Attachments:

Search

Login / Logout

Menu

User Menu