CSS Safari / mobile - Translate and min-height - html

I have site, which is fine on Chrome, Firefox and IE but on Safari (Win version) it does weird things.
First of all min-height of image is not working, even if it should be supported and I've got some troubles with positioning to vertical center.
.carousel .item img {
max-height: 50vh;
min-height: 200px;
margin: auto;
}
.ommo-main {
position: relative;
height: 50vh;
}
.ommo-text {
position: absolute;
top: 65%;
-webkit-transform: translate(0%,-65%);
-ms-transform:: translate(0%,-65%);
-webkit: translate(0%,-65%);
-moz-transform:: translate(0%,-65%);
-o-transform: translate(0%,-65%);
-webkit-transform: -webkit-translate(0%,-65%);
transform: translateY(-65%);
}
All code in bootply HERE.
And in mobile phone, one of my as easy as possible browsers (Javelin, Xiaomi Redmi 2), I've got this issue, but not sure if it's not just a cache.
Could anybody help me, please? Thanks a lot in advance.

Problem was with Safari on Windows, which is somehow not supporting VH and VW units, on MAC OS X it works fine.

Related

IE wrong vertical element position

I have website www.stanosimkovic.sk and i have problem with vertical positioning right element with text on main page in IE browser. In another browsers it load correctly. Can somebody help me how to fix this issue.
I think problem is somewhere in CSS
.alignMiddle {
position: relative;
top: 50%;
transform: translateY(-50%);
}
But dont know how resolve it, because in Chrome Opera etc. its OK.
Depending of the version of IE, the transform property might not work. So what you have to do is add the vendors prefix. So it should look like this (-ms- is for IE) :
.alignMiddle {
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform: translate(-50%);
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
}
Hope it helps !

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

Text is blurred when has transform: translate and it is adjacent to another element with an animation

In the following example a DIV containing some text (example A), get slightly blurred when has a transform: translate CSS applied.
When instead in Text example B, fonts is sharp.
The problem happens only on Google Chrome and works fine on FireFox 46.0.1.
I was able to reproduce it on:
Google Chrome Version 51.0.2704.84 m
Google Chrome Version 53.0.2768.0 canary (64-bit)
I would like to know, if there is a problem with my code, or it is a bug in Chrome.
Also any idea how to solve it is welcome, keeping in consideration I would like to keep transform: translate if possible, and I mainly targeting latest Chrome and FireFox.
Notes on what I have notice so far:
Blur effect happens with different level at different font-size.
Using webkit-font-smoothing : none; does not help.
Issue happens with any font (system default or custom).
I am using Window 8.1.
Here is a live example:
#test {
position: fixed;
font-size: 20px;
top: 60%;
left: 40%;
}
#splashScreen__spinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -90px);
width: 50px;
height: 50px;
}
#splashScreen__infos {
position: fixed;
font-size: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-font-smoothing: none;
}
.loadingSpinner {
width: inherit;
height: inherit;
border: 5px solid #3498db;
border-top-color: rgba(0, 0, 0, 0);
border-left-color: rgba(0, 0, 0, 0);
border-radius: 50%;
animation: spinnerAnimation 0.7s infinite linear;
}
#keyframes spinnerAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<body>
<div data-ntv-type="Spinner" class="spinner" id="splashScreen__spinner" widgetid="splashScreen__spinner">
<div id="splashScreen__spinner__spinner" class="loadingSpinner"></div>
</div>
<div id="splashScreen__infos">A) - We are loading your website. Please wait.</div>
<div id="test">B) - We are loading your website. Please wait.</div>
</body>
This is not a bug in your code, this is well known Webkit rendering bug. See for example: https://support.mozilla.org/pl/questions/1075185 (and many more threads on FF support forums).
In both Chrome and FF, in advanced browser settings you can turn off what is called "hardware acceleration". This setting exists to let your hardware "help out" browser when in comes to advanced graphics rendering. Hardware acceleration automatically turns on for elements that you use translate and some other rules on. This is actually sometimes used by inexperienced "css hackers" to achieve some better/clearer rendering in some cases.
But sometimes it causes more bad than good and this is your case. Once you turn hardware acceleration off in your browser the font is perfectly clear. Sadly there's no real solution code-wise, you can't force turning it off for a given element. We are dependent on Webkit devs fixing the rendering engine here. You can only hack around, like for example change font size to one which for no real reason renders better. Or change positioning in some way which doesn't involve translate. Best of luck to you.

Background color switching to transparent while scrolling in WebKit browsers

I am working on making a fixed navigation web site. I have a navigation bar fixed at the top of the screen using absolute positioning. The CSS looks something like this:
.navbar {
background-color: #1f1f1f
top: 0px;
position: fixed;
width: 100%;
}
And here is my HTML:
<header class="navbar">...</header>
This should be pretty simple, but for some reason I am seeing the background of the navigation flicker between #1f1f1f and what I would describe as simply transparent.
I can get the scroll position to a point where the background color is transparent. At that point, when I inspect the element in the WebKit inspector, the expected styling is there. A background-color of #1f1f1f and basically everything else I mentioned above.
I can toggle the background-color property on and off in the inspector, and that will, more often than not, make the background come back to normal.
Finally, this only seems to be an issue with WebKit based browsers. I can reproduce the issue in Chrome and Opera, but not in Firefox or Internet Explorer. I also don't seem to be able to reproduce this in Safari, at least not in version 7.0 (9537.71) I am also using the Startup Design Framework and the website does feature a video in the background underneath the content <div>, similar to that demo page. Could this be causing some sort of rendering glitch?
More Info:
I removed the background video <div> from the page, and this appeared to solve the issue entirely. This isn't really an ideal solution, though. Are there any known issues with background videos?
You should try a couple different things. First try stacking the item with z-index:
z-index: 1000000; /* max: 2147483647 */
Next, you can try and force hardware acceleration on your menu. The browser will create new rendering layers for your menu which may prevent the flicker.
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
And finally, if your element is larger than the screen (even by one pixel in any direction), it can cause flickering during scrolling on some devices. Try adding the following:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
I recently had the same problem with webkit browsers. All you have to do is add this in your .navbar class in css and see if it works:
backface-visibility:visible;
-webkit-backface-visibility: visible;
-webkit-transform: translateZ(0);
try this:
.navbar {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
background-color: #1f1f1f
}
.navbar {
left: 0;
position: fixed;
top: 0;
width: 100%;
background-color: #1f1f1f;
z-index: 1030;
}
Have you tried to use Firebug to debug the issue? I would suggest you to use Firebug to debug this issue.

SVG Height Larger in Safari

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