Cascading 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

When will CSS animation-timeline hit Safari?
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!
0
1
160
1w
Css fieldset/legend with flex and float bug
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.
0
0
354
Nov ’24
Text-shadow + column-count adds unexpected whitespace at beginning of second column
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; }
1
0
492
Oct ’24
Safari renders html elements in wrong position
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.
1
0
456
Aug ’24
Student in need of help
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 🙏
0
0
564
Jun ’24
In iOS version 17.4 and above, HTML rendering appears abnormal lines after refocusing
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...
20
3
2.2k
May ’24
Safari, iOS, linear-gradient and color-mix issues
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
0
0
946
Apr ’24
Scroll Bar Issue in Safari
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"; } }
1
0
1.6k
Feb ’24