SVG Height Larger in Safari - google-chrome

Been working on a site for quite a while and almost have it done. I am now mainly dealing with an SVG issue in Safari & Chrome (webkit based browsers). When I load the SVG on the homepage there it is larger than in Firefox and IE. This causes the image (head of the hat man) to slightly be cut off or hidden as it is displayed as larger image than in Firefox for example.
Safari screenshot:
Firefox screenshot:
I found this thread on SO. There they suggested to use:
svg { max-height: 100%; }
This CSS change as it is on the site:
.hatman {
position: absolute;
bottom: 15px;
left: 50px;
right: 30%;
}
.hatman .hatman-slide {
height: 100%;
max-height:100%;/*added as suggested */
width: 100%;
}
.hatman #profile {
position:absolute;
left: 0px;
}
.hatman #hat {
opacity: 0;
}
That did however not work for me. The answer was not accepted by the OP either. Another similar issues is described at SO here, but no answer yet either. Has anyone a suggestion how to fix this?

In the end this was more an issue with Webkit dealing with the SVG resizing.
This JavaScript was used to fix the max height issue
function TSafariFix() {
jQuery(window).resize(function() {
TSafariFix_Resize();
});
TSafariFix_Resize();
}
jQuery(document).ready(function(){
Hatman = new THatman();
SFix = new TSafariFix();
});

Related

Why does a large border-radius value cause chrome to hide the image?

I have a 128px image with a border-radius to make it appear rounded (I'm actually using the .is-rounded class from Bulma to do this). This is the resulting CSS on the image:
.image img.is-rounded {
border-radius: 9999px;
}
This works in Firefox but in Chrome, the image is hidden.
If I change it to the following, it works:
.image img.is-rounded {
border-radius: 63px;
}
But anything beyond 63px, the image is hidden again:
.image img.is-rounded {
border-radius: 64px;
}
You can see this on my personal website here: https://dominick.cc/
Chrome 110.0:
Firefox:
I updated Chrome to 110.0.5481.100 and it seemed to resolve it. Weird!

Font awesome not showing just one icon in firefox, but in chrome is working perfectly

I have this webpage, it works smoothly with chrome, but with firefox, the right arrow is not showing, I am using font-awesome, and tried this answer in this post Font awesome not working in Firefox with no success.
I am using CDN to call font awesome, so the fonts are in their server, the strange thing is that is only in firefox the problem.
I am using Ubuntu Linux 16.04, and firefox 52.0.1 (64-bits)
Please could someone tell me how to deal with firefox and this strange issue?
UPDATE: the issue happens with firefox in Linux and Windows
Ok, it seems that the CSS for firefox is pretty different to the other web browsers, I had to do this:
Cange this:
.next-prev-cities-titles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none
}
For This:
.next-prev-cities-titles {
position: absolute;
width: 100vw;
height: 100%;
top: 0;
left: 0;
pointer-events: none
}
Firefox wasn't taking the 100% width

One pixel vary in Firefox and chrome

I have tried a lot to resolve it but couldn't solve, there is one pixel vary in chrome and firefox
.lside,.rside{
position: absolute;
top:22.8rem;
width: 60px;
padding: 0;
margin: 0;
}
.lside{
background: url(../img/sideL.png) no-repeat;
height: 120px;
left: -20px;
}
.rside{
background: url(../img/sideR.png) no-repeat;
height: 120px;
right: -60px;
}
One pixel vary in Firefox and chrome
Web pages will always render differently in different browsers. So the position may differ in different browsers. I don't know any solution to fix it. I can't comment to your post because i don't have much reputation. That's why I post this as an answer. You can try firefox css hack to solve this but i'm not sure that it solves your problem.
#-moz-document url-prefix() {
}
Put your code inside this snippet and try or try css reset and check you included this in yur html file
<meta name="viewport" width="device-width">

ie9 scroll bar and etched border always showing on object

I've got some simple html and css (see below) that shows a flex app inside a Div tag. In most browsers (ie8, chrome, FF), the object doesn't have a border or a vertical scrollbar. In ie9, both a scrollbar and a 3D etched border are shown. I'd like to remove those, I tried various border styles but nothing seem to help. Does anyone have a solution for this? Is this a known problem for ie9 only?
I'm kind of new to Html, CSS, javascript, etc. and I have to say, IE browsers are a pain!
#mapLocation
{
position: absolute;
top: 131px;
left:0;
z-index: 0;
bottom: 120px;
width: 100%;
z-index: 2;
border-style: none;
}
#mapObject{
position:relative;
width: 100%;
height: 100%;
z-index: 2;
border-style: none;
}
</style>
<div id="mapLocation" >
<object id="mapObject" type="text/html" data="otherFile.html"></object>
</div>
Thanks for any help,
Ggilmann
I just had the same issue. It may be a compatibility mode that is switched on in your IE9 browser. Try to uncheck it.

Prevent "overscrolling" of web page

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;
}