CSS

RSS for tag

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.

CSS Documentation

Posts under CSS tag

125 Posts

Post

Replies

Boosts

Views

Activity

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
Topic: Safari & Web SubTopic: General Tags:
7
5
2.7k
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?
Topic: Safari & Web SubTopic: General Tags:
0
0
865
Oct ’23
background-attachment:fixed still not supported?
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?
Topic: Safari & Web SubTopic: General Tags:
32
8
37k
Sep ’23
CSS translateX don`t work on my iphone XS
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?
Topic: App & System Services SubTopic: Hardware Tags:
0
0
965
Sep ’23
Flashing Briefly Within an iframe
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
Topic: Safari & Web SubTopic: General Tags:
0
0
756
Sep ’23
iPad Chrome has wrong height
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; }
Topic: Safari & Web SubTopic: General Tags:
0
0
1.1k
Sep ’23
Safari abosulte position element rending issue on iOS 17 & macOS Sonoma
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
Topic: Safari & Web SubTopic: General Tags:
1
0
2.5k
Sep ’23
Safari returns 0 for --safe-area-inset-bottom when the toolbar is hidden
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
Topic: App & System Services SubTopic: Core OS Tags:
2
2
4.2k
Aug ’23
Body background-color not updating visually
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!
Topic: Safari & Web SubTopic: General Tags:
1
0
748
Jul ’23
[bug report] ios 16 safari bug clip-path, position fixed, zoom
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.
Topic: App & System Services SubTopic: Core OS Tags:
0
0
1.3k
Jul ’23
Flipping the card with transform: translate(100%,0) makes the links not clickable on the card
Issue specifically happens with IOS16.4 and above (both on Chrome and Safari). The same code works across all other browsers and IOS 16.3 and below as well. Below is the CSS code for the card flip (backside of the card) -webkit-transform: rotateY(-180deg) translate(100%, 0); transform: rotateY(-180deg) translate(100%, 0); When the card is flipped, on the backside - no clicks were clickable. translate(100%,0) is the culprit after debugging for many hours. I am not sure what is the alternate solution and/or why this started failing only from iOS16.4 and above. Any insights to this issue would be highly appreciated as I spent way too much of time troubleshooting this stupid issue.
Topic: Safari & Web SubTopic: General Tags:
0
0
860
Jun ’23
iPadOS 17 beta CSS issue
Under iPadOS 17 beta the Web content with below CSS does not display in safari but iPadOS 16.5 does. Could you please help understand and how to fix it for iPadOS 17? Thanks in advance! <html><head><title>111111111111</title></head> <body style="display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;"> <p style="display:inline-flex;">1</p> <p style="display:inline-flex;">2<em>3</em></p> <p style="">4</p> </body></html> Under inspector: Under iPadOS 16.5 in safari, the text displays: However under iPadOS 17 beta, the page is blank and the text does not display:
Topic: App & System Services SubTopic: Core OS Tags:
0
0
996
Jun ’23
Support to Install google Chrome browser on Simulator
I am Web developer, and I needs multiple screen layout things, it's obvious that all the web browser supports debugging, inspection, and responsive mode, and it's enough for web frontend developer, but currently I notice that CSS is not working in safari, as it working in Google Chrome, because earlier both works parallel and similar. I tried using clear cache and history, which works earlier, but this time not.
Topic: Safari & Web SubTopic: General Tags:
0
1
2k
May ’23
Safari can't display embedded font in canvas
On a Mac, Safari shows the wrong font for text drawn in an html canvas element when the font is embedded using @font-fase and a base64 data URI. The embedded font shows up fine in the body of the html (i.e. not in a canvas). Using the embedded font in a canvas element works fine with Chrome and Firefox.On an iOS device, the embedded (base64 data URI) font shows up fine in the html body, but not in a canvas element on all three browsers - Safari, Chrome and Firefox. Is there anything that I can do to fix this? Thanks.
Topic: Safari & Web SubTopic: General Tags:
1
0
1.8k
May ’23
-webkit-line-clamp clamp child scroll container unexpectedly
Parent element with -webkit-line-clamp: n and child ScrollContainer element (with css overflow: hidden) , then this child would be clamped. Problem: child element is clampped. Expect: child element is not clampped. Other browsers tested this issue: Chrome: OK(not clampped) Firefox: OK(not clampped) Edge: OK(not clampped) reproduce code: <div style="display: -webkit-box; width: 200px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;"> <div id="inner_err" style="overflow: hidden; background-color: red;"> Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! </div> <div id="inner_normal" style="background-color: green;"> Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! </div> </div> Behavior:
Topic: Safari & Web SubTopic: General Tags:
0
0
1.7k
Apr ’23
[IOS14, 15] Button Click event does not work at the end of CSS animation
https://codesandbox.io/s/react-typescript-popuptest-q0bn0d?file=/src/App.tsx Here's a simple project with a modal that has a CSS fade-in animation. The modal window has a close button, but in iOS 14-15 safari, the modal does not disappear when I click the button when the fade effect ends. (It works on other OS such as Windows, MACOS, and Android) https://www.youtube.com/watch?v=BLYgK08BZkU If you watch this video, you can see that the modal window doesn't disappear when I click the button at the end of the animation What is the cause of this problem, and is there a solution?
Topic: App & System Services SubTopic: Core OS Tags:
0
0
737
Apr ’23
HTML Video element, not working after iosSafari15 update
hi, after update(ios15.0) of my iPhone12, video element on my website, what im using as video background of website has stopped working. all others browsers is working properly. all i can see is white blank background instead of background video. it looks like video cannot be loaded or played. html: <video playsinline       autoplay       muted       loop       class="uvodna__bg-video" >     <source src="/wp-content/themes/imtsmile2021/video/bg-video.mp4" type="video/mp4" /> </video> can you recommend me some tips to fix that issue? thank you
Topic: Safari & Web SubTopic: General Tags:
27
3
40k
Apr ’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
Topic: Safari & Web SubTopic: General Tags:
Replies
7
Boosts
5
Views
2.7k
Activity
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?
Topic: Safari & Web SubTopic: General Tags:
Replies
0
Boosts
0
Views
865
Activity
Oct ’23
background-attachment:fixed still not supported?
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?
Topic: Safari & Web SubTopic: General Tags:
Replies
32
Boosts
8
Views
37k
Activity
Sep ’23
CSS translateX don`t work on my iphone XS
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?
Topic: App & System Services SubTopic: Hardware Tags:
Replies
0
Boosts
0
Views
965
Activity
Sep ’23
Flashing Briefly Within an iframe
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
Topic: Safari & Web SubTopic: General Tags:
Replies
0
Boosts
0
Views
756
Activity
Sep ’23
iPad Chrome has wrong height
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; }
Topic: Safari & Web SubTopic: General Tags:
Replies
0
Boosts
0
Views
1.1k
Activity
Sep ’23
Safari abosulte position element rending issue on iOS 17 & macOS Sonoma
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
Topic: Safari & Web SubTopic: General Tags:
Replies
1
Boosts
0
Views
2.5k
Activity
Sep ’23
Safari returns 0 for --safe-area-inset-bottom when the toolbar is hidden
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
Topic: App & System Services SubTopic: Core OS Tags:
Replies
2
Boosts
2
Views
4.2k
Activity
Aug ’23
IOS 14.4.1 WebView HTML content CSS Position:fixed Disappear when scroll
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.
Topic: Safari & Web SubTopic: General Tags:
Replies
3
Boosts
0
Views
2.0k
Activity
Jul ’23
Body background-color not updating visually
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!
Topic: Safari & Web SubTopic: General Tags:
Replies
1
Boosts
0
Views
748
Activity
Jul ’23
[bug report] ios 16 safari bug clip-path, position fixed, zoom
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.
Topic: App & System Services SubTopic: Core OS Tags:
Replies
0
Boosts
0
Views
1.3k
Activity
Jul ’23
Flipping the card with transform: translate(100%,0) makes the links not clickable on the card
Issue specifically happens with IOS16.4 and above (both on Chrome and Safari). The same code works across all other browsers and IOS 16.3 and below as well. Below is the CSS code for the card flip (backside of the card) -webkit-transform: rotateY(-180deg) translate(100%, 0); transform: rotateY(-180deg) translate(100%, 0); When the card is flipped, on the backside - no clicks were clickable. translate(100%,0) is the culprit after debugging for many hours. I am not sure what is the alternate solution and/or why this started failing only from iOS16.4 and above. Any insights to this issue would be highly appreciated as I spent way too much of time troubleshooting this stupid issue.
Topic: Safari & Web SubTopic: General Tags:
Replies
0
Boosts
0
Views
860
Activity
Jun ’23
iPadOS 17 beta CSS issue
Under iPadOS 17 beta the Web content with below CSS does not display in safari but iPadOS 16.5 does. Could you please help understand and how to fix it for iPadOS 17? Thanks in advance! <html><head><title>111111111111</title></head> <body style="display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;"> <p style="display:inline-flex;">1</p> <p style="display:inline-flex;">2<em>3</em></p> <p style="">4</p> </body></html> Under inspector: Under iPadOS 16.5 in safari, the text displays: However under iPadOS 17 beta, the page is blank and the text does not display:
Topic: App & System Services SubTopic: Core OS Tags:
Replies
0
Boosts
0
Views
996
Activity
Jun ’23
PWA vs Ionic Application vs Wrapped website in Ionic application
Hey, I read the guidelines of the App Store and saw that repackaged website will be declined. Buts, an ionic application is basically a wrapped website and PWA as well. So I don't really understand the guidelines. Is there someone or somewhere I cam message to ask and get a formal answer? Thanks in a advance.
Topic: Safari & Web SubTopic: General Tags:
Replies
1
Boosts
0
Views
1.1k
Activity
Jun ’23
Support to Install google Chrome browser on Simulator
I am Web developer, and I needs multiple screen layout things, it's obvious that all the web browser supports debugging, inspection, and responsive mode, and it's enough for web frontend developer, but currently I notice that CSS is not working in safari, as it working in Google Chrome, because earlier both works parallel and similar. I tried using clear cache and history, which works earlier, but this time not.
Topic: Safari & Web SubTopic: General Tags:
Replies
0
Boosts
1
Views
2k
Activity
May ’23
foreignObject in safari
Using foreignObject in svg will cause the element display to be misaligned, is this by design or has this bug itself, and if it is a bug itself, is there a plan to fix the problem?
Topic: Safari & Web SubTopic: General Tags:
Replies
0
Boosts
0
Views
1.2k
Activity
May ’23
Safari can't display embedded font in canvas
On a Mac, Safari shows the wrong font for text drawn in an html canvas element when the font is embedded using @font-fase and a base64 data URI. The embedded font shows up fine in the body of the html (i.e. not in a canvas). Using the embedded font in a canvas element works fine with Chrome and Firefox.On an iOS device, the embedded (base64 data URI) font shows up fine in the html body, but not in a canvas element on all three browsers - Safari, Chrome and Firefox. Is there anything that I can do to fix this? Thanks.
Topic: Safari & Web SubTopic: General Tags:
Replies
1
Boosts
0
Views
1.8k
Activity
May ’23
-webkit-line-clamp clamp child scroll container unexpectedly
Parent element with -webkit-line-clamp: n and child ScrollContainer element (with css overflow: hidden) , then this child would be clamped. Problem: child element is clampped. Expect: child element is not clampped. Other browsers tested this issue: Chrome: OK(not clampped) Firefox: OK(not clampped) Edge: OK(not clampped) reproduce code: <div style="display: -webkit-box; width: 200px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;"> <div id="inner_err" style="overflow: hidden; background-color: red;"> Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! </div> <div id="inner_normal" style="background-color: green;"> Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! </div> </div> Behavior:
Topic: Safari & Web SubTopic: General Tags:
Replies
0
Boosts
0
Views
1.7k
Activity
Apr ’23
[IOS14, 15] Button Click event does not work at the end of CSS animation
https://codesandbox.io/s/react-typescript-popuptest-q0bn0d?file=/src/App.tsx Here's a simple project with a modal that has a CSS fade-in animation. The modal window has a close button, but in iOS 14-15 safari, the modal does not disappear when I click the button when the fade effect ends. (It works on other OS such as Windows, MACOS, and Android) https://www.youtube.com/watch?v=BLYgK08BZkU If you watch this video, you can see that the modal window doesn't disappear when I click the button at the end of the animation What is the cause of this problem, and is there a solution?
Topic: App & System Services SubTopic: Core OS Tags:
Replies
0
Boosts
0
Views
737
Activity
Apr ’23
HTML Video element, not working after iosSafari15 update
hi, after update(ios15.0) of my iPhone12, video element on my website, what im using as video background of website has stopped working. all others browsers is working properly. all i can see is white blank background instead of background video. it looks like video cannot be loaded or played. html: <video playsinline       autoplay       muted       loop       class="uvodna__bg-video" >     <source src="/wp-content/themes/imtsmile2021/video/bg-video.mp4" type="video/mp4" /> </video> can you recommend me some tips to fix that issue? thank you
Topic: Safari & Web SubTopic: General Tags:
Replies
27
Boosts
3
Views
40k
Activity
Apr ’23