My Ionic application have a detail view with transparent header. Applying CSS class "bar-clear" to my element is doing the job just fine in desktop browsers and when running the app on Android (see result here).
But when running on iOS 8 the header is white and opaque (see here).
Any idea why?
I did some research and people it got it working by setting bar-light to the header bar and then making these changes:
.bar.bar-light {
background-color: rgba(255,255,255,.66) !important; /* or transparent, or background:none */
}
.scroll-content {
overflow: visible !important;
}
See this playground: http://play.ionic.io/app/3cbf53eff565
Will it work once built? not sure but give it a go and let me know.
Related
I would like to fix an issue I have on my website. I would like to have the safe bottom area the same color than the tab bar when scrolling, instead of the body background. What would you suggest me to do?
.header {
position: fixed;
bottom: 0;
right: 0;
left: 0;
height: 64px;
background-color: var(--black-3);
z-index: 9;
}
First screen
Second screen
Safari changing the tab/status bar color dynamically is a new feature of Safari 15. The release also adds support for the theme-color meta tag for customizing the color. From the release notes:
Added support for the theme-color meta tag to change the tab bar background and over-scroll area in macOS and iPadOS, and the status bar in iOS.
You have to put the <meta name="theme-color" content="#xxxxxx"> tag to your web page to use a specific color instead of the automatically picked one. Unfortunately this also means you can’t use your CSS variable for it but have to define the colour value in at least two places now.
Keep in mind that this also sets the top bar color for Chrome Android and the tab bar is at top in macOS and iPadOS Safari, so the effect may not be expected. The meta tag supports media queries in media attribute (see the release notes link) and changing the content attribute’s value using javascript should work as expected though (demonstrated in the Apple Developers video in references).
Note that content attribute accepts a CSS <color>. This means that the following is possible:
window.addEventListener("load", (event) => {
document.querySelector("meta[name=theme-color]").content =
window.getComputedStyle(document.querySelector(".header"))
.getPropertyValue("background-color");
});
I don’t have a device with Safari 15 beta available to test with, but I suppose you could also add the element dynamically. It works with Chrome Android at least:
window.addEventListener("load", (event) => {
let meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = window.getComputedStyle(document.querySelector(".header"))
.getPropertyValue("background-color");
document.head.appendChild(meta);
});
Resources:
MDN: Standard metadata names: theme-color
CSS-Tricks: Meta Theme Color and Trickery
Apple Developers: Design for Safari 15 (theme-color is featured in the first part of the video. It also has information about using the safe area environment variables for content floating at bottom.
Edit: Added the javascript examples
With iOS 11 and iPhone X Apple specified every app should live in a "safe area" (due to the virtual home button):
Inset essential content to prevent clipping. [...] For best results, use standard, system-provided interface elements and Auto Layout to construct your interface. All apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar.
The problem is a Ionic app (v. 1) with tab bar cover this part of the screen, therefore the bar is under the home button:
Does anyone know how to fix it?
(please note: if you run a new Ionic app v1 inside iPhone X simulator you will get two black spaces, at the top and bottom of the window, but you can prevent this adding "viewport-fit=cover" to your meta tag inside index.html)
For an Ionic 4 project, this would be:
app.scss
body {
margin-top: env(safe-area-inset-top);
margin-top: constant(safe-area-inset-top);
}
ion-tab-bar {
margin-bottom: env(safe-area-inset-bottom);
}
env is for more recent iOS11 versions, and constant is for older ones.
You should be able to apply the same principle outlined in this answer to the Ionic v1 footer, i.e.
.bar-footer {
margin-bottom: constant(safe-area-inset-bottom);
}
(or something similar - I haven't tested this)
For an Ionic1 project, I found that targeting the tab-nav did the trick.
.tab-nav {
margin-bottom: constant(safe-area-inset-bottom);
}
You can add a constraint to your custom tabBar main view to connect it to the bottom safeAreaLayoutGuide.
yourView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true
Does anyone know why this is happening?
I want both checkmarks to be white, but the :after element is black (however it seems to have a vertical white to black gradient).
It works in Chrome and Safari on a MacBook.
Open this example page in Safari on an iPhone to see the issue:
http://output.jsbin.com/lerudihiho/
(and here is the code: http://jsbin.com/ponamazoso/edit?html,css,output)
The fix here is similar to when you're using U+2714 in HTML: you need to add a U+FE0E VARIATION SELECTOR-15 directly after the check mark to tell iOS to draw it as an outline rather than a bitmap. Here's what this looks like in CSS:
body::after {
content: "\2714\fe0e";
color: red;
}
I'm susccesfully using background-blend-mode on my header here: https://yogrow.co/ecommerce-stack
However I've noticed that the background-blend-mode is not working on iPhone. I just get no background color.
Here is the CSS I am using
background-repeat: repeat;
background-image: url("assets/img/swirl_pattern.png");
background-color: #E33551;
background-blend-mode: multiply;
Is the only / best option to use media queries to create a new set of css rules or is there an alternative way to have a fallback so for devices like iPhone Safari that do not show the color bg the background goes to a red.
Because I have white text on top of the background it currently looks illegible on the iPhone safari.
Thanks
It seems like background-blend-mode not working with background-repeat: repeat;. Try to set background-repeat: no-repeat;.
It seems the following modes is not supported by safari for background-blend-mode:
hugh, saturation,color and luminosity
I see the author of the question did not use one of the above mentioned, but it might help someone else.
background-repeat: no-repeat worked for me, but in our application, the element in question could sometimes have a repeating background, so that solution was not sufficient. I found (in iOS 10.2) that any element with border-style set on it would not respect background-blend-mode; i.e., images and colors would not blend. Removing border-style (or any variants like border-bottom-style or border) fixed the issue.
I absolutely needed background-repeat in my design. I have a transparent PNG over a solid color (a linear-gradient layer).
The workaround isn't exactly pretty: I load UAParser.js, and test for (iOS && WebKit).
<script src='https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.21/ua-parser.min.js'></script>
<script>
window.workaroundBackgroundBlendMode = (function() {
var ua = UAParser()
var isWebKit = (ua.engine.name === "WebKit")
var isIOS = (ua.os.name === "iOS")
var debug = false //|| true
var shouldActivate = (isWebKit && isIOS) || debug;
if (shouldActivate) {
document.body.classList.add("is-ios-webkit")
}
// You can inspect this returned object afterwards
return {isWebKit, isIOS, debug, shouldActivate, ua}
})()
</script>
There will be a small lag, but I figure this is justified because it only affects the buggy clients.
I have used Jquery Mobile. I have added background image like this<body background ="6.jpg">.
I want to make background image responsive. What process should i follow to make it responsive? Please Suggest.
Update
I have tried using this
body {
background: url(6.jpg) ;
background-size:cover;
}
.ui-page {
background: transparent;
background-repeat: no-repeat;
}
.ui-content{
background: transparent;
}
followed this link Stacjoverflow
but failed. Width of the image is responsive but height is getting too smaller than the original image.
You can working for example with this: http://jquerypicture.com/
The important think is (generell for responsive) you must working with media queries.
PS: Instead of seeting the background in the body tag, please use a class for this.