Questions tagged css

Explore the latest questions and answers asked by our top developers.

iOS Safari Ignores Body Overflow: Hidden when Input Focused

It appears that on iOS 14.5 in Safari (haven’t tested in Chrome), overflow: hidden is ignored if the user is focused in an input field. Now, you can add a touch-action: none to the body element and that works in some situations, but it’s a hack (it doesn’t actually disable scrolling) and that attribute is […]

By Colin
Published
Categorised as css, html, ios, javascript, mobile-safari Tagged , , , ,

Safe area insets (e.g. safe-area-inset-bottom) ignore Safari ‘Aa’ zoom level?

We have the following code adding safe area height to a bottom toolbar so the iOS home bar doesn’t appear over the top of the bottom toolbar icons. /* Extra bottom padding for iPhoneX and iPad Pro Home bar */ @supports (padding: constant(safe-area-inset-bottom)) { .dvFooterContainer1 { –safe-area-inset-bottom: constant(safe-area-inset-bottom); height: calc(var(–safe-area-inset-bottom) + 56px); } } @supports […]

By user1946932
Published
Categorised as css, ios, javascript, safari, webkit Tagged , , , ,

iOS/iPad + Safari: Vertically and horizontally sticky positioned cells showing jerky effect

I have a table, not the HTML table, but the one made of React styled divs, in which the top 4 row cells are sticky positioned, also 2nd, 3rd and 4th row cells are replaced by their replacers when corresponding data set is accessed through vertical scrolling, as per shown in gif, thats the reason […]

By Sujit Singh
Published
Categorised as css, ios, ipad, safari, sticky Tagged , , , ,

Is the Fullscreen API supported in Android Browser and iOS Chrome?

I have a full-page React application. By this, I mean that the width and height of the application take up the width and height of the browser viewport. I would like to hide the address bar in Android Browser or iOS Chrome. This is very valuable space for a full-page data visualization application. In landscape […]

By Alex Reynolds
Published
Categorised as android, css, google-chrome, ios, javascript

WinXP-style drag-glitch effect when dragging elements on website on iPhone only

As the title specifies, my website presents a weird effect when I am dragging elements. This only happens on iPhone; on Desktop and Android browsers it does not happen. This is how it looks like: I can paste a snippet containing the code to drag the elements, but I do not think it will help. […]

By Alvin Sartor
Published
Categorised as css, ios, javascript

Iphone X viewport switching from portrait to landscape causes top of page to be unclickable

Issue with link at top of the page on iPhone X becomming unclickable after rotating from portrait to landscape. While in portrait mode click ‘Hide Toolbar’ then rotate to landscape. Using the following code I can’t seem to be able to click the ‘Close’ button. Is the top of the screen an unclickable area reserved […]

By Tikeb
Published
Categorised as css, ios, iphone, viewport

Html video background not working for iOS on Ionic framework

I’m trying to get a full screen video background for my Ionic app, it works perfectly fine on Android and the Browser, but when I run the app on an iPhone in Xcode simulator, It’s just a white background and the video doesn’t load. Html Code: <div class=”fullscreen-bg”> <video autoplay loop muted playsinline webkit-playsinline> <source […]

By Courtney White
Published
Categorised as cordova, css, html, ionic-framework, ios

WKWebView – prevent automatic scrolling triggered by user text selection

When a user performs a tap and hold gesture to select a word and then drags their finger towards either the top or bottom edges of the screen, the page automatically scrolls in order to accommodate the selection. here is a short clip demonstrating it I would like to prevent this behavior inside a WKWebView. […]

By banana1
Published
Categorised as css, html, javascript, swift, wkwebview

The white X appears in the grey box on all browsers I have but Safari on iPad. Did I make a mistake or Safari?

On Safari on Ipad the white X appears on the right hand part of the black. This is the only Safari I have though so unsure if iPad issue or Safari issue or my issue. https://jsfiddle.net/juvpxa8q/ <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″ name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0″/> <title>title</title> </head> <body> <div id=”main”> <div id=”piece-info-container”> […]

By Dejas
Published
Categorised as css, html, ios, ipad, safari

ios PWA How to open external link on mobile default safari(not In app browser)

I’m making a PWA in IOS 13.2. I need to launch another PWA on my app by clicking the external link for that PWA. The problem is that my PWA opens all external links on the in-app browser. As you know, we can not add PWA to Home screen on In-app browser. How can I […]

By Viktor Belashov
Published
Categorised as css, html, ios, javascript, progressive-web-apps
1 2 3

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq