In our Angular 13 app, there is a modal component. In the component css there is this :host selector for the root and is also the style for the backdrop:
:host {
position: absolute;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
justify-content: flex-end;
overflow-x: hidden;
}
Now, Only on IPhones (Shows ok on: Windows 11, Android phones) all of the component, the component root as backdrop (and all its content - the modal itself) are not showing at all.
Any Idea why?
Doesn't happen in other modals or in other components
Ok, this is a weird one, and I'm not sure I understood everything, but it seems that the iPhone rendered the
:host { position: absolute }
differently that others. On absolute it renders the modal on the left side "outside" the iPhone screen:
The "fix" if I would call it that was to change the position to fixed:
If you have an explanation for this phenomena I'd love to hear it!
Related
Setting up my website portfolio site following this yt tutorial from Traversy Media (https://youtu.be/gYzHS-n2gqU). I want to turn the menu (which is simply transparent) into one that simply applies a blur to what's underneath it.
I have tried inputting filter: blur(5px); and all sorts of combinations of that in the css but it never works :(
// Menu Overlay
.menu {
position: fixed;
top: 0;
width: 100%;
opacity: 1; //this is where you control the opacity of the menu. 1 = opaque, 0 = transparent
visibility: hidden;
&.show {
visibility: visible;
}
&-branding,
&-nav {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
float: left;
width: 50%;
height: 100vh;
overflow: hidden;
}
&-nav {
margin: 0;
padding: 0;
/*background: darken($primary-color, 5);*/
background: transparentize(
$color: darken($primary-color, 5),
$amount: 0.05
);
list-style: none;
transform: translate3d(0, -100%, 0);
#include easeOut;
&.show {
// Slide in from top
transform: translate3d(0, 0, 0);
}
}
You can see the menu code in action on the portfolio site I have created at mashal.co/ It's under construction still, so don't flame me too hard for it haha.
Right now, all it is a minor transparent overlay when I click the menu button in the upper right. the code I provided above is only for the right half of the the overlay. Thanks a ton for any and all help in advance!!
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Note that it is still an experimental property:
Chrome, Opera, Chrome for Android: supported after enabling "Experimental Web Platform Features "
IE, Firefox: not supported
What I'd advise you is to play around with a simple filter CSS property to apply the blur you want.
I've created a Chrome app with a window but it's not movable. I want to make the top bar (HTML/CSS styled) what allows it to move. I looked at the Chrome App samples, but cannot find the code that makes dragging a window around possible.
I discovered the answer and it did not appear in the documentation, nor was it obvious. It is a CSS property that controls this.
-webkit-app-region: drag;
Without that, your frameless window is not moveable.
IMPORTANT: Any child node of the draggable node that you want to be clickable or interactable, needs a -webkit-app-region: no-drag; on its CSS.
For example:
.myCustomBar {
position: absolute;
width: 100%;
height: 30px;
-webkit-app-region: drag;
}
.myCustomBarCloseButton {
position: relative;
width: 100px;
height: 30px;
-webkit-app-region: no-drag;
}
Just add below code in your background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create("frameless_window.html",
{ frame: "none",
id: "framelessWinID",
innerBounds: {
width: 360,
height: 300,
left: 600,
minWidth: 220,
minHeight: 220
}
}
);
})
And follow https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/frameless-window
Here you can find the best sample for creating frameless chrome app with the movable window.It's little bit confusing because, after installing it in chrome you can able to create its shortcut on the desktop as well.
In Chrome for Mac, one can "overscroll" a page (for lack of a better word), as shown in the screenshot below, to see "what's behind", similar to the iPad or iPhone.
I've noticed that some pages have it disabled, like gmail and the "new tab" page.
How can I disable "overscrolling"? Are there other ways in which I can control "overscrolling"?
The accepted solution was not working for me. The only way I got it working while still being able to scroll is:
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
In Chrome 63+, Firefox 59+ and Opera 50+ you can do this in CSS:
body {
overscroll-behavior-y: none;
}
This disables the rubberbanding effect on iOS shown in the screenshot of the question. It however also disables pull-to-refresh, glow effects and scroll chaining.
You can however elect to implement your own effect or functionality upon over-scrolling. If you for instance want to blur the page and add a neat animation:
<style>
body.refreshing #inbox {
filter: blur(1px);
touch-action: none; /* prevent scrolling */
}
body.refreshing .refresher {
transform: translate3d(0,150%,0) scale(1);
z-index: 1;
}
.refresher {
--refresh-width: 55px;
pointer-events: none;
width: var(--refresh-width);
height: var(--refresh-width);
border-radius: 50%;
position: absolute;
transition: all 300ms cubic-bezier(0,0,0.2,1);
will-change: transform, opacity;
...
}
</style>
<div class="refresher">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<section id="inbox"><!-- msgs --></section>
<script>
let _startY;
const inbox = document.querySelector('#inbox');
inbox.addEventListener('touchstart', e => {
_startY = e.touches[0].pageY;
}, {passive: true});
inbox.addEventListener('touchmove', e => {
const y = e.touches[0].pageY;
// Activate custom pull-to-refresh effects when at the top of the container
// and user is scrolling up.
if (document.scrollingElement.scrollTop === 0 && y > _startY &&
!document.body.classList.contains('refreshing')) {
// refresh inbox.
}
}, {passive: true});
</script>
Browser Support
As of this writing Chrome 63+, Firefox 59+ and Opera 50+ support it. Edge publically supported it while Safari is an unknown. Track progress here and current browser compatibility at MDN documentation
More information
Chrome 63 release video
Chrome 63 release post - contains links and details to everything I wrote above.
overscroll-behavior CSS spec
MDN documentation
One way you can prevent this, is using the following CSS:
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body > div {
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
This way the body has never any overflow and won't "bounce" when scrolling at the top and bottom of the page. The container will perfectly scroll its content within. This works in Safari and in Chrome.
Edit
Why the extra <div>-element as a wrapper could be useful: Florian Feldhaus' solution uses slightly less code and works fine too. However, it can have a little quirk, when it comes to content that exceeds the viewport width. In this case the scrollbar at the bottom of the window is moved out of the viewport half way and is hard to recognize/reach. This can be avoided using body { margin: 0; } if suitable. In situation where you can't add this CSS the wrapper element is useful as the scrollbar is always fully visible.
Find a screenshot below:
You can use this code to remove touchmove predefined action:
document.body.addEventListener('touchmove', function(event) {
console.log(event.source);
//if (event.source == document.body)
event.preventDefault();
}, false);
Try this way
body {
height: 100vh;
background-size: cover;
overflow: hidden;
}
html,body {
width: 100%;
height: 100%;
}
body {
position: fixed;
overflow: hidden;
}
position: absolute works for me. I've tested on Chrome 50.0.2661.75 (64-bit) and OSX.
body {
overflow: hidden;
}
// position is important
#element {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
Bounce effect cannot be disabled except the height of webpage equals to window.innerHeight, you can let your sub-elements scroll.
html {
overflow: hidden;
}
I am working on a website, the site is http://fredsrewards.loyaltylane.com/fredsshopper. There is a navigation menu at the top of the page. The links don't work in Chrome or Firefox but they do work in IE9. The site uses a few javascript files. I have tried changing things in the CSS and HTML but nothing works. The site was built using MVC 3. Any advice would be greatly appreciated. Thank you in advance.
It's because you have another div (phar_panel) on top of the navigation.
You can fix it by setting:
#m_box {
/* rules you already have */
position: relative;
}
#phar_panel {
/* rules you already have */
width: 230px;
height:31px;
right:30px;
position: absolute;
}
#phar_panel img {
/* rules you already have */
left: 230px;
position: absolute;
}
Also, be careful, you have more than one element with the same id (navigation) in your page!
I'm finding a very strange problem with my jQuery mouseover caption function when viewed in Chrome - but only on Macs! My friend uses Windows 7 and all of his browsers display the js correctly and smoothly. However I've tested on numerous Macs and Chrome for Mac just can't seem to handle it!
FF and Safari work perfectly in both OS (slightly smoother in Safari).
Firstly, here's the site I'm building at the moment here. The function is the mouseover for each item in the portfolio section.
The JS:
$(document).ready(function() {
$('.item .caption').hide();
//On mouse over
$('.item').hover(function() {
//Display the caption
$(this).find('div.caption').stop(true, true).fadeIn(300);
},
//When mouse leave
function() {
//Hide the caption
$(this).find('div.caption').stop(true, true).delay(700).fadeOut(300);
});});
The CSS:
.item {
float:left;
height: 215px;
margin: 7px;
width: 225px;
position: relative;
background: #cacbce;
}
.item .caption {
background: url(images/hoverbg.png) repeat;
box-shadow:inset 0px 0px 250px #000;
-moz-box-shadow:inset 0px 0px 250px #000;
cursor: pointer;
height: 100%;
width: 100%;
padding: 0;
position: absolute;
top: 0;
}
Pretty standard function, I'm sure you'll agree. Has anyone got any ideas what is going wrong?
I'm using Chrome 10.0.648.133 (up to date as of 15th March 2011). I'm starting to think it's a problem with the browser!
This has been resolved.
Chrome has difficulty with box-shadow css inside elements you're applying the JS to. Once I removed that, it worked perfectly. I'll bring this issue up on the Chrome dev forums.