I have customized the Popup css to have it in fixed position and horizontally aligned in the center of the screen. It displays correctly in Android device, but way of in iOS. Below is the css I have and the screenshot for iOS and Android. How can I fix the issue in iOS?
.credit-deny-popup .popup {
position: fixed;
top: 60px;
margin-left:auto;
margin-right:auto;
width: 250px;
height: 250px;
}
.credit-deny-popup .popup-title {
font-weight: bold;
font-size: larger;
color: #FFFFFF;
}
.credit-deny-popup .popup-head {
background-color: #387EF5;
}
iOS Screenshot
Android Screenshot
Thank you in advance!
As suggested by #DaDanny in https://forum.ionicframework.com/t/ionic-popup-position/111102/4 fixed the issue. I had to add left and right in the css as well.
.credit-deny-popup .popup {
position: fixed;
top: 60px;
margin-left:auto;
margin-right:auto;
left: 0;
right: 0;
width: 250px;
height: 250px;
}
Related
I am trying to style the ion-refresher component background on one specific page, because it has a header. It works like expected in Safari, but on the device, it overlays everything on top.
I have tried some stuff with z-index (also with pseudo element) + positioning absolute, but I cannot get the ion-refresher to sit where it normally is. As soon as I add a background-color to the ion-refresher, it will overlay on top.
Any ideas on how to style the background of this element?
The CSS I used. Please note it only overlays everything when I add a background-color.
ion-refresher:global(.ios) {
height: 120px;
ion-refresher-content {
position: relative;
padding-top: 18px;
justify-content: start !important;
&::after {
content: '';
display: block;
width: 100%;
height: 120px;
position: absolute;
top: 0;
z-index: -9999;
background-color: purple;
}
}
:global(.refresher-pulling-icon) {
color: white;
}
ion-spinner {
color: white;
}
}
Any advice on how to debug this?
I have a web app that draws lots of overflowed canvases with windows styled scroll bars.
Previously on iOS 12.X this worked fine and we had 17px scroll bars being overlayed, this behaviour still works-on Android Chrome, and all desktop browsers.
Here's a JS fiddle of a "typical" item we have https://jsfiddle.net/wf80rp5g/4/
css for it
.VTSOuterDiv {
width: 400px;
height: 400px;
overflow: auto;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 17px;
height: 17px;
overflow: scroll;
}
::-webkit-scrollbar-track {
/* This color is also used by WIN_NODE's setCanvasSize method, so if we change this
then we should update that. */
background-color: rgb(240, 240, 240);
}
::-webkit-scrollbar-thumb {
background-color: rgb(205, 205, 205);
min-width: 10px;
min-height: 10px;
}
::-webkit-scrollbar-button {
display: normal;
background-color: rgb(240, 240, 240);
background-repeat: no-repeat;
background-position: center;
width: 17px;
height: 17px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(170, 170, 170);
}
::-webkit-scrollbar-thumb:active {
background-color: rgb(141, 141, 141);
}
::-webkit-scrollbar-button:hover {
background-color: rgb(170, 170, 170);
}
::-webkit-scrollbar-button:active {
background-color: rgb(141, 141, 141);
}
On desktop browser there's scroll bars, on chrome mobile and older safari there's scroll bars, but on 13.X we no longer get stylized scroll bars.
is there any known work arounds for this? the release notes aren't forth coming about this change.
I am building a modal popup window for mobile.
I noticed that when I try to scroll below the limit of the modal (see "B" part, on "A" part I reached the bottom),
The fixed section I have on the bottom becomes covered with gray, the more I try to force scroll.
It's happening both on Safari and Chrome, See this photo:
This is the order and CSS of the elements:
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.popup-r {
overflow-x: hidden;
width: 100%;
min-height: 100vh;
height: auto;
position: absolute;
z-index: 999;
top: 0px;
left: 0;
display: none;
padding-bottom: 100px;
}
.fix-section {
width: 100%;
z-index: 999;
position: fixed;
bottom: 0;
white-space: nowrap;
}
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
tried with this code, still not working. It's fine on every other devices, it's fine in MAC as well, only the problem is on ios responsive devices.
You need to add overflow-scrolling to parent div. Check the below demo
.wrap {
width: 320px;
height: 500px;
position: relative;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch !important;
overflow-y: auto !important;
border: 2px solid #ddd;
margin-bottom: 20px;
}
iframe {
width: 100%;
height: 100%;
border: none;
display: block;
position: absolute;
}
<div class="wrap">
<iframe class="iframe" src="https://theimpossiblecool.tumblr.com/"></iframe>
</div>
When I scale an element on Safari Mobile / iOS, the text seems blurry.
I tested it on iOS7, iOS8, iOS9 even iOS10.
.sticky-note {
position: fixed;
bottom: 1em;
right: 1em;
padding: 0.5em 1em;
background: tomato;
color: white;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div class="sticky-note">
This text is blurry on iOS
</div>
The blurry effect came from the combination of position: fixed and transform: scale().
The position: fixed seems to enable the GPU acceleration, which is faster, but could reduce rendering quality of fonts.
.sticky-container {
position: fixed;
bottom: 1em;
right: 1em;
}
.note {
padding: 0.5em 1em;
background: tomato;
color: white;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div class="sticky-container">
<div class="note">
This text is not blurry \o/
</div>
</div>