Every now and then I need to make a website. And I noted in my last project that background-attachment:fixed; is still not supported by iOS. It
is by Safari on MacBooks, so I'm wondering what the story behind it is? Surely it is not a matter of computational cost due to the so-called repainting of the browser's canvas? Because doesn't playing video cost a multitude of that?
CSS
RSS for tagCascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
Posts under CSS tag
33 Posts
Sort by:
Post
Replies
Boosts
Views
Activity
::-webkit-scrollbar-thumb does not work in iOS 13 devices, Need to change thumb colour from black to white for dark background.
Tried below solution but not working.
::-webkit-scrollbar-thumb {
background: white;
}
Any suggestions.
Thanks
Safari is returning 0 for --safe-area-inset-bottom when I use getComptutedStyle method on Iphones running on ios +15 both on portrait and landscape mode when the toolbar is hidden.
I can guess that it's desired when the address bar is on the bottom and is hidden, however, is it supposed to return 0 when the address bar is set to be on the top (like on the ios versions -15) and the toolbar is hidden? Is it intended or an overlook from Safari?
Comparison between versions:
Safari ios14 hidden top toolbar portrait --safe-area-inset-bottom : 34,
Safari ios14 hidden top toolbar landscape --safe-area-inset-bottom: 21
Safari ios 15+ hidden top toolbar portrait --safe-area-inset-bottom : 0,
Safari ios 15+ hidden top toolbar landscape --safe-area-inset-bottom: 0
I have an IOS app with a Web View. The website have a fixed header and footer. Since the update to 14.4.1 the header is pushed down, and the footer becomes invisible when the page is scrolled.
Under iPadOS 17 beta the Web content with below CSS does not display in safari but iPadOS 16.5 does. Could you please help understand and how to fix it for iPadOS 17? Thanks in advance!
<html><head><title>111111111111</title></head>
<body style="display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;">
<p style="display:inline-flex;">1</p>
<p style="display:inline-flex;">2<em>3</em></p>
<p style="">4</p>
</body></html>
Under inspector:
Under iPadOS 16.5 in safari, the text displays:
However under iPadOS 17 beta, the page is blank and the text does not display:
Issue specifically happens with IOS16.4 and above (both on Chrome and Safari). The same code works across all other browsers and IOS 16.3 and below as well.
Below is the CSS code for the card flip (backside of the card)
-webkit-transform: rotateY(-180deg) translate(100%, 0);
transform: rotateY(-180deg) translate(100%, 0);
When the card is flipped, on the backside - no clicks were clickable. translate(100%,0) is the culprit after debugging for many hours. I am not sure what is the alternate solution and/or why this started failing only from iOS16.4 and above.
Any insights to this issue would be highly appreciated as I spent way too much of time troubleshooting this stupid issue.
Device: iphone, ios 16
Software: safari
Steps to reproduce:
Go to https://ig.ft.com/filipino-fishermen
Zoom in so that the content is bigger than the screen
Problem: white text from lower down the page appears erroneously on screen.
Context: The white text is position fixed. It is hidden inside a parent container using clip-path: inset(0) on the parent container. This works correctly at normal zoom, but the clip-path appears to be ignored when the user zooms in on mobile safari.
Hi everyone,
I am having a problem that only happens in Safari that is really weird. I tried to google it but I didn't find any information regarding this so I was hoping that someone could help me here.
I have a site that supports dark and light theme, and when I switch from dark to light or vise versa the background-color on the body doesn't change. I saw on the dev tools that the rgb on the computed changes but on the screen it stays with the previous color and needs a refresh to change to the correct color.
Can somebody help me?
Thank you in advance!
On Safari of iOS 17 and macOS Sonoma, I am encountering a layout problem where the .content element seems to be covering the .header element, resulting in unexpected rendering. This issue is not consistently reproducible across different devices or browsers.
Here's the HTML and CSS structure:
demo
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<style>
.page {
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
}
.container {
height: 100%;
width: 100%;
overflow: auto;
}
.header {
position: absolute;
top: 0;
background: lightblue;
height: 50px;
width: 100%;
}
.content {
height: 2000px;
background: lightcoral;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="page">
<div class="container">
<div class="header">header</div>
<div class="content">content</div>
</div>
</div>
</body>
</html>
If remove overflow in .page, or make .content not scrollable, .header shows correct that overlap .content
iPad Pro(11-inch), iPadOS version: 16.6.1, Chrome version: 116.0.5845.177
I create a simple html and try to run on iPad. Although I set the height to 100vh, there is a vertical scrollbar on the right, and I could scroll down to a total empty page. It seems like the total height is more than 200vh.
The web page works on Safari, but not work in iPad chrome.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div style="background-color: green; height: 100%; width:100%;">This is a div</div>
</body>
</html>
css:
body {
height: 100vh;
min-height: -webkit-fill-available;
}
html {
height: 100vh;
height: -webkit-fill-available;
}
Hello!
I am someone who creates websites.
When I click a link within an iframe, the screen briefly turns white.
(This link navigates within the iframe, and the parent frame does not navigate.)
I haven't specified any background-color or styling within the iframe, including the body.
However, it turns briefly white during the transition, probably due to a rendering issue.
This issue doesn't occur on other devices (android).
Can this be resolved with CSS, or is it a bug?
PC
MAC OS / 13.4 (22F66)
Safari / 16.5 (18615.2.9.11.4)
iPhone
IOS / 16.1.1
Safari / unknown
Hello,
I have an Iphone XS with iOS 16.6 and I'm developing a website using NextJs (13) and React (18) where I have a sliding text from right to left. I can see it everywhere but on my iPhone, this is the code
.slider-container {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
height: 200px;
}
.slider-container span {
display: inline-block;
padding-left: 100%;
animation-name: slideLeft;
animation-duration: 36s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: slideLeft;
-webkit-animation-duration: 36s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.slider-container-2 span {
animation-delay: 18s;
-webkit-animation-delay: 18s;
}
@keyframes slideLeft {
0% {
transform: translateX(0);
-webkit-transform: translateX(0);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
``` can you help me?
I’m talking about CSS-functions: https://w3c.github.io/csswg-drafts/css-values/#round-func)
.example {
--result: round(up, var(--number), 1);
}
In Safari 16.x css round didn’t work perfect.round(up, x, 1) did its job, if x wasn’t a “natural” number (all digits after the fraction mark 0). If it was, it resulted the next one!
Now Safari 17.0 gives 0 for all numbers!
!Update!
Sorry, Safari 17 does round! But: not in code like that:
:root { --result: round(up, var(--number), 1);
Had a project, where this was used to define the number of columns and rows I wanted for an (mostly) quadratic layout.
What’s working instead:
grid-template-columns: repeat(round(up, sort(var(--items), 1), minimal(…);
the former css used the :root-variant (grid-template-columns: repeat(var(--result) …).
!Update 2!
After some experiments I found: Safari 17 doesn’t like :root any more! (https://www.w3.org/TR/selectors-3/#root-pseudo)
And: Safari doesn’t calc correct: `round(up,1,1)˚ is 2 — says Apple. YOU MUST NOT CALC CSS-INTEGERS! CSS-DPI ist ####### ENOUGH!
After migrating from iOS 16 to 17, Safari does not show svg icons. On devices with iOS 16 they are displayed
In my PWA app, I utilize the getUserMedia() API for accessing the camera and also employ HTML audio tags to handle various types of media content. However, since updating to iOS 17, I've encountered an issue where, after granting permission for camera access, audio playback occurs through the earpiece instead of the media speaker. This problem is specific to iOS 17; earlier iOS versions work as expected.
My app is developed using a stack that includes JavaScript, Angular, Ionic, HTML5, and CSS. Can you please provide guidance or a solution to address this issue and ensure that audio plays through the media speaker when using the camera on iOS 17?
CSS based dark mode / light mode changes are not being applied to websites installed to homescreen as PWA (Webapp).
Changing dark/light mode does not immediately change the displayed PWA style. A restart of the webapplication is required for the css to take effect.
While in the browser the css is being applied immediately as expected.
This bit only occurs on iOS 17. iPadOS and OSX work as expected.
Example:
https://whatpwacando.today
I am facing an issue in scrollable components as I have a parent component and child component both are scrollable but when I get to the end of my child component then it should scroll the parent component by default but it gets stuck in the child components scroll only.
FYI, I am using reactJs if it helps in any case.
I am new to developing native Apple apps and must familiarize myself with the Apple development frameworks. I am starting to create a personal document-based Apple App that can run on iOS, iPadOS, and macOS. The document will contain the following: HTML, PDF, images, video, and audio files. So, I think the document format could be HTML.
I need the capability to read, edit (WYSIWYG Editor), save, and share documents with other users using the same app. The data is stored in the user's device and iCloud.
I need guidance about what Apple framework I should use to edit the documents using WYSIWYG editing principles.
I would really appreciate any recommendation you can provide.
Many thanks for considering my request.
Thank you so much for your attention and participation.
I have a Website live on http://chatwithsanta.azurewebsites.net/
It uses Flexbox to show chat messages and a chat message input.
Specifically, the Body is a flexbox container with a message screen containing messages, and a message input form at the bottom.
This layout works in Chrome on desktop, even when Chrome is set to simulate an iPhone 12 Pro layout.
But the form does not appear on my own iPhone.
What should I do?
Hi, I've got this html text:
"<style>* {font-size: 12pt !important;color: #000000 !important;font-family: Montserrat-Regular !important;}</style>Perform the following steps:<br><u>Option 1:</u><br><p>1) Upon receiving a push notification alert, tap on the push notification to launch BIMB Authenticator</p><p>2) Verify the transaction details and choose \"Approve\"</p><p>3) Complete</p><br><u>Option 2:</u><br><ol><p>1) If you didn’t receive push notification, you may launch BIMB Authenticator</p><p>2) Verify the transaction details and choose \"Approve\"</p><p>3) Complete</p>"
And I'm trying to show this HTML text properly in a UILabel. This is my codes:
String extension to map to NSAttributedString:
extension String {
func attributedStringFromHTML() -> NSAttributedString? {
guard let data = "\(self)"
.data(using: .utf8, allowLossyConversion: false) else {
Log.error(category: .transaction, message: "Unable to decode data from html string: %@", self)
return nil
}
let options: [NSAttributedString.DocumentReadingOptionKey: Any] = [
.documentType: NSAttributedString.DocumentType.html,
.characterEncoding: String.Encoding.utf8.rawValue
]
if let attributedString = try? NSAttributedString(data: data, options: options, documentAttributes: nil) {
return attributedString
} else {
Log.error(category: .transaction,
message: "Unable to create attributed string from html string: %@",
self)
return nil
}
}
}
And this is the result:
Can you tell me how to fix this? Thanks.