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

21 Posts
Sort by:

Post

Replies

Boosts

Views

Activity

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
228
3w
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
287
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
423
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
1.7k
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
684
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.3k
Feb ’24
Videojs player issue on iOS 17 software update
Hi, After iOS 17 software update, we've encountered an anomaly with the video element within our videojs player. Upon video load, there's a noticeable shift and recentring of the video to its correct position. This issue becomes more pronounced when the player is in a horizontal orientation while the video being played is vertical. Additionally, we've observed resizing and cropping issues during the initialization of the player, which were not present in earlier versions. In our current implementation, we have a canvas element inserted before the player. Due to resizing, the video sticks to the canvas and fails to return to the correct position. <div> <video class="vjs-tech" webkit-playsinline playsinline src="hls video source"> </video> <canvas style="filter: blur(15px)" class="vjs-tech custom-canvas" width="412" height="320"> </canvas> </div>
0
0
1k
Feb ’24
Smart Banner Help
Hello, I am looking for help with displaying Smart Banners on mobile devices. What is the preferred coding that can have Smart Banners appear on all devices? I am having an issue where an Smart Banner is not properly functioning as I would like it to. I would like the CTA (Call-To-Action) to be positioned on the top of a mobile screen. If a user has the mobile app already, it should read OPEN and opens into the app when it is clicked. If the user does not have the app, it should read GET and take a user to the mobile app store when it is clicked.
0
0
645
Feb ’24
Strange counting in Safari
First: don’t tell me about webkit-reporting. I just get a 502 from there! Ok, what’s the problem? I made an example telling it all: <html> <head> <style> .ext { display: none; color: cyan; } body { max-inline-size: calc(100vi - 12px); &:not(:has(:target)), &:has(p.dft:target) { #ext { display: none; } #dft { display: block; } } &:has(p.ext:target) { #ext { display: block; } #dft { display: none; } } &.ext li { display: none; } &:has(.ext:target) { & li.ext { display: revert; } } } header > p > a::before { color: orange; content: "click me >>> "; } ul { display: flex; } li { margin: 1ex; list-style-type: none; inline-size: max-content; } .yes li::before { font-size: 70%; color: yellow; background-color: blue; content: "(" counters(total, ":") ")"; } ul.nGrp { display: inline flex; counter-reset: nameIndex; & li::after { display: inline-block; counter-increment: nameIndex; font-size: 75%; color: red; vertical-align: sub; content: "(" counter(nameIndex) ")"; } } header { inline-size: 100%; font-size: 2rem; text-align: center; } article { counter-reset: total; padding: 1ex; margin: 1em; &::after { font-size: 3em; color: purple; content: "— [" counter(total) "] —"; } li { counter-increment: total; } outline: 1ex groove purple; } </style> <title>Strange Safari-Count</title> </head> <body lang="de"> <header> <hgroup><h1>Strange counting without <code>:before</code></h1><p>different from FireFox!</p></hgroup> <p id="dft" class="dft"><a href="#ext">More?</a></p> <p id="ext" class="ext"><a href="#dft">Less!</a></p> <p><code>:before</code> doesn’t inherit parent’s display:none? (same in FireFox)</p> </header> <article> <ul> <li class="dft"><p>A1</p></li> <li><ul class="nGrp"><li class="dft"><p>A1</p></li><li class="dft"><p>A1</p></li></ul></li> <li class="dft"><p>A3</p></li><li class="dft"><p>A4</p></li> <li><ul class="nGrp"><li class="dft"><p>A5</p></li><li class="ext"><p>A5</p></li></ul> </li> <li><ul class="nGrp"><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li></ul></li> </ul> <ul> <li><ul class="nGrp"><li class="ext"><p>B1</p></li><li class="dft"><p>B1</p></li></ul></li> <li class="dft"><p>B2</p></li> <li><ul class="nGrp"><li class="dft"><p>B3</p></li><li class="ext"><p>B3</p></li></ul></li> </ul> </article> <article class="yes"> <ul> <li class="dft"><p>A1</p></li> <li><ul class="nGrp"><li class="dft"><p>A1</p></li><li class="dft"><p>A1</p></li></ul></li> <li class="dft"><p>A3</p></li><li class="dft"><p>A4</p></li> <li><ul class="nGrp"><li class="dft"><p>A5</p></li><li class="ext"><p>A5</p></li></ul> </li> <li><ul class="nGrp"><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li></ul></li> </ul> <ul> <li><ul class="nGrp"><li class="ext"><p>B1</p></li><li class="dft"><p>B1</p></li></ul></li> <li class="dft"><p>B2</p></li> <li><ul class="nGrp"><li class="dft"><p>B3</p></li><li class="ext"><p>B3</p></li></ul></li> </ul> </article> </body> </html> At least have an eye on the total count at the end of the (identical) articles! Before and after clicking the teaser.
4
0
891
Feb ’24
After clicking button while submitting form in "jsp" page, loader is not working properly
Hi, We are facing an issue in our page , The same works fine in other operating systems like android and windows. we are facing this issue only on IOS and MAC(safari browser alone ). We have a loader with us ,which will be shown in 2 different phases in our page. The first time loader will be shown while page is being loaded, the second loader will be shown once the user clicks on pay button. the first loader is not giving any issues for us .But the second loader is not loading completely as you can see in the attached not working image ,the blue circle is being displayed only a 5-10%. It should start from 0 and gradually should reach 100% and again a loop. From the analysis we could see the loader rotates fine after clicking pay button ,but once after page is submitted the issue happens document.paypage.submit(); (code attached below) // this is the form submission in our page // once the control reaches this line we could see the loader is not working fine. the same scenario is checked in android ,but even after page submission the loader works fine, Only in IOS and mac we are facing issue in (safari in mac other browser works fine without any issue), (all browsers in iOS). please direct us to solve the issue Attached images of working and not working scenario Not Working Working Code sample <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Loader</title> <style> .loader { position: relative; margin: 0 auto; width: 100px; &:before { content: ""; display: block; padding-top: 100%; } } .circular { animation: rotate 3s linear infinite; height: 100%; transform-origin: center center; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .background-ring { fill: none; stroke: rgb(227, 226, 231); stroke-width: 5; } .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; stroke-linecap: round; } @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 30% { stroke-dasharray: 95, 200; stroke-dashoffset: -30px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } @keyframes color { 100%, 0% { stroke: rgb(14, 236, 218); } 40% { stroke: rgb(14, 236, 218); } 66% { stroke: rgb(14, 236, 218); } 80%, 90% { stroke: rgb(14, 236, 218); } } body { background-color: var(--white); } .showbox { display: flex; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 5%; } </style> </head> <body> <div class="showbox"> <div class="loader"> <svg class="circular" viewBox="25 25 50 50"> <!-- Background ring --> <circle class="background-ring" cx="50" cy="50" r="22" /> <!-- Loading circle --> <circle class="path" cx="50" cy="50" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" /> </svg> </div> </div> </body> </html>
0
0
675
Jan ’24
"Google pay button icon" not visible in specific iOS versions
Hi, The below code is used for loading GPay icon dynamically from Google in "WKWebView". The same code works for later versions of IOS like 16.4, but issue happens in 16.1 ,16.2 and 16.3 versions. while loading this code from IOS 16.3 the icon (Gpay icon) is completely black, looks like it's not loaded properly. Please assist us on what can be the issue, and how we can proceed to solve the issue. Not working Working
0
0
683
Jan ’24
revert-layer within inline styles
Although CanIUse reports only 3% global support for the revert-layer keyword, I've noticed that it seems to work pretty consistently within inline styles (i.e. the style attribute). This got me thinking (hoping) that maybe browser support for revert-layer specifically within inline styles may be much better than reported. However, it's difficult to find any data since I suppose my use case is somewhat uncommon. Can anyone comment on the state of Safari's support for revert-layer specifically within inline styles? I would be extremely grateful for any light you can shed on this.
0
0
538
Jan ’24
iOS17 PWA `position: fixed` element breaks after a while
I have a menu bar which overlays a body scroll in my PWA with styling: position: fixed; bottom: 0px; This works fine after launching the PWA. In addition to scrolling my app also has a dialog overlay which is invoked many times during regular use. The bug: After a few hours of mixed use and backgrounding the app, the position fixed bottom does not stick to the bottom of the page when scrolled down. It is almost as if there is an invisible Safari navbar that pushes the viewport up (the PWA forgets it's not in Safari? :)). On scroll down With the dialog open This one is a bit tedious, but I am able to consistently reproduce it on my app following these steps and with also with a stripped down HTML: Create a PWA app on a iOS17 device with the following html: https://github.com/apsm100/ios17-pwa-position-fixed-bug/blob/main/index.html Open the app and open and close the dialog a few times. Leave the app open in the background for a few hours and periodically open it up to test scrolling up and down and opening and closing the dialog. Eventually you will see the bug. I am not entirely sure if the dialog has any role in this, I haven't gotten that far in testing. Since I use my app daily I would say it happens about after an hour of backgrounding and a few minutes of use. Thank you!
2
1
2.3k
Jan ’24
HTML tags in UILabel don't work
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.
0
0
762
Dec ’23