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

32 Posts
Sort by:

Post

Replies

Boosts

Views

Activity

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
95
1w
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...
18
3
802
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
333
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
872
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
571
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
409
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
574
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
457
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
453
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
352
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
1.4k
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
554
Dec ’23
Flexbox item not appearing on Safari (iOS 17.1.2)
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?
0
0
351
Dec ’23
Document-based Apple App that can run on iOS, iPadOS, and macOS
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.
2
0
675
Nov ’23
iOS 17 homescreen pwa dark/light mode not working
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
6
5
1.4k
Oct ’23
How can I resolve the issue where, in iOS 17, audio plays through the earpiece instead of the speaker when the camera loads?
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?
0
0
585
Oct ’23