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!
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
31 Posts
Sort by:
Post
Replies
Boosts
Views
Activity
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?
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
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;
}
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
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!
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.
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.
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
::-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
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?