Hi all,
Chrome has it already - animation-timeline aka scroll-animations.
I can nowhere find any informations on what's the status in Safari/Webkit.
Seems like they do not have it on the agenda at all?
Does anyone know anything - I wanted to push a feature request for that - but also seem there is no feature request list anymore for webkit.
See: https://www.w3.org/TR/scroll-animations/
Cheers and kind regards!
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
14 Posts
Sort by:
Post
Replies
Boosts
Views
Activity
In the Safari browser on mobile devices, the tags in an HTML element are styled with the system's default styles. I want the text inside the tags to be displayed without line breaks. However, in reality, the text wraps according to its length. May I ask if there are any methods to achieve this?
(ps: CSS-related properties such as white-space: nowrap do not work.)
the backdrop is not work through css variable, but
it works well through the certain value.
and the problem wasn't appear in old version
When I want legend inside the filedset, not on the border as default browsers design, I set float: left to the legend. It works in every modern browser - Safari too. The problem is when the filedset itself is set to display: flex. Float propertie of the legend is ignored. In other browsers this approach works fine and the float stays and the legend is inside of the fieldset as we expect.
Howdy!
On Safari, when using the column-count CSS property to split text into multiple columns, I've noticed that when applying a text-shadow, there is an unexpected whitespace created above all subsequent columns. I've put together a codepen demonstrating the issue and its reproducibility on Safari (using latest as of this posting: Version 17.6 (19618.3.11.11.5))
Codepen: https://codepen.io/cubepresser/pen/ExqvzjL
Expected behavior:
Actual:
I tested this on the latest versions of Chrome, Firefox and Edge. This bug does not occur.
Expected behavior is that there should not be an extra line added to the beginning of the second column, third column, etc.
Here's some code if that codepen link doesn't work:
HTML:
<p id="example">0000000000111111111122222222223333333333</p>
CSS:
#example {
font-family: monospace;
max-width: 20ch;
column-count: 2;
column-gap: 0;
word-break: break-all;
line-break: anywhere;
text-shadow: 0 0 4px black;
}
Hai guys,
I'm trying to do autofocus on the search input while user clicks the search icon but its not working as expected in iPhone and iPad so go through some blogs and stackoverflow they mentioned the apple has removed the focus() from touchable device for usablity reason is anyone come up with the same issue or having solution for this kindly share. That must be helpful for me.
Check the attached screenshot, web inspector shows the right element size and position, but Safari renders it in a wrong place. The element reacts on mouse events also correctly - according to its real position.
Here you can find the live example https://3dflipbook.net/css-layer-highlight
This is a regression issue, it was working fine in 15.6.
Bug tracker: https://bugs.webkit.org/show_bug.cgi?id=278898
Please fix the issue.
Hi, here's an example: https://codepen.io/gyurmey2/pen/abgNQdE
Is this even a known issue?
when i use font-family:system-ui on the web, i found the text will be smaller on ios 18 beta, the problem also appear on ios 17 when using iphone 15 pro max.
It looks ok if i use font-family:PingFang SC instead of system-ui.
when use the css below, the text will be smaller than iOS17.
font-family:system-ui
If i use font-family: PingFang SC, that will be ok.
If system-ui was modified by system?
So the css in this post is broken only on iphones if we view it on an android phone then there is no issues, and I can't figure out why?
the scroll background is looking wired, but it's defined by: width: 60px;
height: 60px;...
Anyhow i'm just wondering why the css is not working as it should? Please help me 🙏
In iOS version 17.4 and above, we have observed that the following code works fine upon the initial opening. However, after minimizing the page and reopening it, there is a chance of encountering issues with abnormal lines.
Please note the reproduction conditions: try minimizing the page, opening other apps, and then reopening it multiple times.
The code is in the comments section.
first time:
After minimizing and reopening...
I have a web site that uses CSS linear-gradient with color-mix for a background of a division. It shows up just fine in Safari on iOS and iPadOS 17.4.1. When do a screenshot, and select "Full Page", the background-image becomes all black and the text in the division is unreadable.
Here is an example of what I am doing.
div.ugly
{
background-image: linear-gradient(to right, yellow, color-mix(in srgb, red, blue));
}
Any ideas how to get this to not turn black?
I've tried using a print media query but the "Full Page" screenshot does not use that.
It looks like it might be a bug in iOS/iPadOS.
Thanks,
Mike
Hello,
I've encountered an issue with the scrollbar functionality on my webpage specifically when accessed through Safari. Despite its functionality on other browsers and devices, Safari on iOS 14 displays only the native scrollbar during scrolling, contrary to the desired behaviour of consistently showing the scrollbar.
&::-webkit-scrollbar {
height: 2px;
}
&::-webkit-scrollbar-track {
background-color: "white";
margin-left: 4px;
margin-right: 4px;
}
&::-webkit-scrollbar-thumb {
background: "orange";
}
}